小程序

1 view 相当于 div 、 text 相当于 span 、block 相当于 <template>

2 判断 wx:if 、wx:elif 、 wx:else

Eg: <view> <text wx:if="{{scord > 60}}">好</text> <text wx:elif="{{scord > 54}}">中</text> <text wx:elif="{{scord > 53}}">还行</text> <text wx:else>管</text> </view>

3 列表渲染

如果有一个数组，那么可以使用wx:for={{数据}}

wx:for需要添加wx:key key中是遍历出来的对象中的属性名

wx:for会自动生成item 和 index两个变量

如果我们需要修改item和index的名字

wx:for-item=“新的名字”wx:for-index=“新的名字”

Eg:

<view wx:for="{{array}}" wx:key="name" wx:for-item="msg" wx:for-index="i">{{msg.name}}-{{i}}</view>

4 数据请求

在微信小程序中，想要请求数据可以使用wx.request()

如果我们调用该方法，一定会报错，因为小程序会校验可信任接口，如果没有添加，则无法被请求。我们可以在小程序右上角“详情” -> "本地设置"中勾选不校验合法域名选项（开发环境中就不会有问题）

wx.request({ url: 'url', data: data, header: header, method: method, timeout: 0, success: (result) => {}, fail: (res) => {}, complete: (res) => {}, })

5 事件

1 生命周期函数 onLoad 监听页面加载完成

2 事件绑定 bindtap=“page中的函数名” 传参，可通过data-xxx

Eg: <button class="btn" bindtap="getMsg" data-key="value">xxx</button> Page({ data: { }, tapHandler (e) { // e.currentTarget.dataset.key } })

3 input实现数据双向绑定 通过 bindinput

<input type="text" placeholder="请输入内容" class="ipt" value="{{value}}" bindinput="changeValue"/>

6 wxs !!!

wxs是一个微信的脚本语言，大致语法和js一致wxs是用来导出模块，然后我们可以利用wxs标签引入模块

demo.wxs

module.exports = { modulename: 值 }

demo.wxml

<!-- 引入 --> <wxs src="./demo.wxs" module="自定义模块名"></wxs> <!-- 使用 --> {{自定义模块名.modulename}}

7 data

在小程序中，如果我们想要获取到对应的data中的数据，需要使用this.data.属性名的操作。

1 setData this.setData用于修改设置我们的data中的值，直接修改是不支持动态渲染。

Page({ data: { msg: "消息", arr: [1,2,3,4], obj: { name: '张三' }, obj2: { arr: [{name: '李四'}] } } }) this.setData({ msg: '新的值', arr: [123,45324,6437], 'arr[1]': '新的值', //注意此写法 react不能这样写 obj: {新的对象}, "obj.name": '新的名字', //注意此写法 react不能这样写 "obj2.arr[0].name": "新的名字" //注意此写法 react不能这样写 })

2 setData回调函数

setData是一个异步操作，存在回调函数 this.setData({}, function () { // 这个函数会在setData之后执行 })

8 组件

创建组件需要使用Component构造器，包含组件的js wxml wxss json Component({ /* 组件标签上的属性 */ properties: { msg: { type: String } }, data: { }, methods: { } })

注册组件

在需要使用组件的页面或组件的json文件中，配置usingComponents { "usingComponents": { "组件标签名": "组件路径" } }

使用

注册组件后我们就可以在对应的页面或父组件中使用<组件标签名></组件标签名>

9 组件通信

父子通信

父子通信和vue中父子通信一致，给组件标签上添加属性及值，就可以在组件内部通过properties获取Eg: Page({ data(){ msg:"xxx" } }) <view> <nav msgs="msg"></nav> </view> Component({ properties: { category:{ msgs:String } }, })

子父通信

和vue一样，子组件中通过this.triggerEvent触发对应的自定义事件并传递数据

父组件中，给子组件标签上绑定事件bind:自定义事件名="函数"，子组件传递的数据就是e.detail.key

Component({ methods:{ ... this.triggerEvent("事件名AAA",value) } }) <view> <nav bind事件名AAA="自定义名字"></nav> <!-- 或 --> <nav bind:事件名AAA="自定义名字"></nav> </view> Page({ 自定义名字(e){ //e.detail中就是传过来的数据 } })