小程序开发随记

前端小程序开发随记

1. 学习小程序，就是学习一个新的框架，但是和其他框架一样，部分规则是一样的，比如，一些数据的操作（请求回来的数据，动态替换数据）都是通过指令在页面html中操作，

2. 新建一个项目会自动配置出一系列文件，app.js是整个项目的整体，用APP{ }包裹，app.json里面的一些页面的配置，谁在上面就显示哪个页面，config.js里面放一些公共的方法，一般都是接口的配置，

3. 小程序page页面，主要包括.wxml，.wxss，.js，.json四个文件，其中wxml，wxss和html，css是一样的，只是主体标签名字不同，这里用view,text，json里面写当前页面的配置，.js就是对当前页面的操作，用Page包裹，有生命周期，引用公共js用require例如const ajax = require('../../utils/fetch.js');变量写在data中，data: { province: [],}变量赋值用setDatathat.setData({ farmerImg: tempFilePaths[0] })其他的就是一些常用的wx的api接口，用到什么看文档就可以了，api文档链接。

4. 还有就是一些时间的绑定，用bind，点击时间就是bindtap；例如<image src="../../img/carmera.png" style='width: 50rpx;height:50rpx;right:150rpx; margin-right:20rpx;' bindtap='toIdCardUpload'></image>其中toIdCardUpload为点击时间触发的函数，例外一些button的操作<button class='phone-style' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 自动获取 </button>里面open-type为打开类型，如获取电话号码授权弹框，后面bindgetphonenumber就是确认后的回调函数

5. 然后就是请求了，用request，看文档也很简单，但是里面有个小坑需要注意，发送请求用get或post时，需要的header不同，要对应，否则可能失败，get/'content-type': option.contentType,post/'application/x-www-form-urlencoded'。一般还会结合promise一块使用。

6. 单选框的实例<radio-group class="radio-group" name="isInsurance" bindchange="radioChange2"> <label class="radio" wx:for="{{radiosInsurance}}" wx:key="name"> <radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}} </label> </radio-group>

自己记录，自己看的懂就好