小程序基础

小程序

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中就是传过来的数据
  }
})