小程序基础
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了小程序基础,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1768字,纯文字阅读大概需要3分钟。
内容图文
![小程序基础](/upload/InfoBanner/zyjiaocheng/830/46ccbe5f65ca48e08f2b0c1e01c07a48.jpg)
小程序
wxml:页面的内容
wxss:页面的样式
javascript:页面的交互逻辑和数据通信
wxs:wxml的脚本增强 filter等操作
wxml范例
<view class="className" data-name="A">
Hello,World!
<view>
Hello,China!
</view>
</view>
wxml语言特性:
1.数据绑定
<!--index.wxml-->
<view>
<text>{{message}}</text>
</view>
Page({
date: {
message:"hello,world"
}
})
属性
id: string 组件的唯一标示 保持整个页面唯一
class string 组件的样式类 在对应的wxss中定义的样式类
style string 组件的内联样式 可以动态设置的内联样式
hidden boolean 组件是否显示 所有组件默认显示
data any 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind* eventhandler 组件的事件 详见事件
2.列表渲染
<!--index.wxml-->
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item,name}}</view>
</block>
</view>
// index.js
Page({
data:{
items:[
{name:"商品A"},
{name:"商品B"},
{name:"商品C"},
{name:"商品D"}
]
}
})
3.条件渲染
<!--index.wxml-->
<view>今天吃什么?</view>
<view wx:if="{{condition ===1}}">
饺子
</view>
<view wx:elif="{{condition===2}}">
米饭
</view>
<view wx:else>
面食
</view>
//index.js
Page({
data:{
condition:Math.floor(Math.random()*3+1)
}
})
4.模板引用
<!--index.wxml>
<template name="tempItem">
<view>
<view>收件人:{{name}}</view>
<view>联系方式:{{phone}}</view>
<view>地址:{{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>
Page({
data:{
item:{
name:"张三",
phone:"1888888888",
address:"中国"
}
}
})
import 和 include的应用
内容总结
以上是互联网集市为您收集整理的小程序基础全部内容,希望文章能够帮你解决小程序基础所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。