小程序的语法跟 vue 的语法格式很像 里面标签很简单 就重复那几个
1 页面布局 - 优先选取flex布局(可以看看阮一峰的博客讲的很详细)
2 由于是前后端分离,所以提前根据接口文档返回参数,进行数据模拟(mock.js)
3 工具函数的封装 例如 请求接口的函数 等多次调用的函数 (Promise)
4 后端返回的数据处理(如果提前沟通好了可以省很多时间)
5 项目需求的确定 不要根据自己的想法写,不然后期会不停返工 ***
6 代码优化,一定要考虑性能方面的问题,像 this.setData({})最好在一次里面赋值
// fetch.js
module.exports = (url, data) => { return new Promise((resolve, reject) => { wx.request({ url: `xxxxxx${url}`, method: 'POST', data: data, header: { "content-type": 'application/x-www-form-urlencoded'}, success: resolve, fail: reject})})
在页面中导入 const fetch = require('../../utils/fetch.js')
fetch('url',{}).then(res => {console.log(res.data})
如果需要继续调用只需要 return 一下就可以
// token 的获取
调取微信登录方法=> 获取code值 => 根据需求传递参数调取登录接口=> 获取token存入全局变量中(在globalData中定义全局变量token)=>app.globalData.token = res.data.token=>然后在每个页面就可以调用了。(公用的数据都可以存在globalData中)
// formId 的获取
//与用户发生交互获取formId 必须设置 report-submit='true'
<form bindsubmit="formSubmit" report-submit='true'>
<button
form-type='submit'
></button>
</form>
//绑定事件 只有在真机上测试才有值
formSubmit: function (e) {
app.globalData.formId = e.detail.formId;
},
还有就是小程序的跳转方式要注意 可以重点看看navigateTo 和 navigator redirect 的区别
其它的不懂的可以查阅小程序官方文档,比较详细。
就先这样吧,第一篇随便写写,以后慢慢上干货吧。