初学小程序学习笔记(持续更新)

一、data

和vue中的data不同的是，直接修改data的数据 不会实时更新
比如：

data: {
    count: 0,
    items: []
},
onLoad: function (){
    var that = this
    that.data.count = 2 // 毫无卵用
    console.log(that.data.count) // 2 说明改是改对了，但是页面没有更新
}

解决办法： setData

onLoad: function(){
    var that = this
    that.setData({
          count: 2 ,  // 左边参数是data中得参数，右边赋值。复杂的赋值比如操作数组之类的，最好定义变量接收后使用
          key: value,
          ...
     })
}

setData对数组元素操作：

let items = that.data.items // 声明一个变量保存data-items的值
items.push/pop/..(数组操作方法)(value) // 对改变量进行数组操作
that.setData({
    items: items // 将该变量赋值给data中的items
})

二、input双向绑定

小程序里面没有v-model 需要添加绑定事件 bindinput="functionName"
示例：

<input bindinput="bindKeyInput"></input>
<view>{{inputValue}}</view>
data: {
    inputValue: ''
},
bindKeyInput: function(e){
    var that = this
    that.setData({
          inputValue: e.detail.value     // 这里是input输入的值。这样赋值就可以做到inputValue与input框中输入的值实时绑定
     })
}

三、循环:wx.for

语法： wx:for="{{value}}" wx:key="{{index}}"
示例：

<view wx:for="items" wx:key="{{index}}">{{item}} {{index}}</view> // 这里的items是data中声明的数组，index：下标，item：循环后的值。对像操作也一样，item加上对应的key值
data: {
    items: ['one', 'two', 'three']
}

四、条件：wx:if

语法：wx:if="{{条件语句}}"
条件语句都是写在{{}}里面的 else 写法直接： wx:else

五、本地存储： wx.getStorage/wx.setStorage

使用方式:

wx.setStorage({
    key: 'value',
    data: 'value'
})
类似于 setStorage('key', 'value')

wx.getStorage({
    key: 'value', // 与setStorage中的key值对应
    success: (res) => {
          console.log(res.data) // 这里面获取到的便是setStorage中的key值对应的data
     }
})
类似于：getStorage('key')

六、点击事件绑定: bindtap

使用方法：

<button bindtap="functionName"></button>
functionName: fucntion(){
    console.log(2) // 点击按钮触发functionName方法，在js中写对应的方法
}

外层使用wx:for循环，需要在里面再包裹一层，并将点击事件写在那层元素中,重点加上data-name属性。
示例：

<view wx:for="{{ietms}}">
    <view bindtap="clickItem" data-name="item">124</view>
</view>
clickItem: function(e) {
   console.log(e.currentTarget.dataset.name) //能够输出data-name指定的值
}

八、网络请求 wx.request

https://segmentfault.com/a/1190000014789969 promise 封装

https://www.w3cvip.org/topics/623 封装，鉴权
官方文档
必要准备，微信公众平台->设置-> 开发设置->服务器域名，配置一个request合法域名作为请求接口地址。必须https且经过备案后的地址。
使用:

wx.request({
    url: 'requestURL'，
    data: {},
    method: 'post/get/..other'， // 默认为 get方式
    complete: (res) => {
          console.log(res) // 请求回调，成功失败都返回
     }
})

更多细节查看官方文档，这里只是最基本的写法。

九、form表单提交

使用方法：

<form bindSubmit="functionName">
    <input name="userName" ></input> // 与一般表单写法相同
.....
    <button formType="submit">提交</button>
</form>

// js中的方法

functionName: function (e) {
    console.log(e.detail.value) // 输出对象 {userName: 'value', ....}
}

1.表单提交方法定义在form标签中，在提交按钮上使用对应的formType绑定相应的方法。
2. 输出的e.detail.value中的key对应每个表单元素中的name值

表单提交请求示例：
index.wxml:

<form bindsubmit="formSubmit">
    <view>
          <input name="username" placeholder="请输入用户名" value="张三"></input>
     </view>
    <view>
          <button formType="submit">提交</button>
     </view>
</form>

index.js:

page({
data: {
    listData: {}
},
formSubmit: function (e){
    var that = this
    let params = e.detail.value
    wx.request({
          url: 'myURL',
          data: params,
          method: 'post',
          complete: (res) => {
                 that.setData({
                     istData: res.data.data
                 })
         }
     })
}
})