分享下微信小程序常用的知识点
虽然现在很多人吐槽说用uniapp不香嘛，干嘛还使用原生的；那不做跨端的咧...... 现在还是有许多公司用原生写的小程序(一般不做跨端的)。
原生的搭建方便啊，有的小程序就想搞个可以自助点赞，查询订单就行，你整那么多干嘛。
一、 为什么使用微信?程序 ？
1. 微信有海量??，?且粘性很?，在微信?开发产品更容易触达??；
2. 推?app 或公众号的成本太?。
3. 开发适配成本低。
4. 容易?规模试错，然后快速迭代。
5. 跨平台。
二、页面布局
页面布局的话使用弹性布局比较好点，局布的好，感觉自然而然就来了。
弹性布局常用的css元素如下：
display: flex; //定义为弹性容器
justify-content: space-between; //使你内容分布两边;
center; //使内容居中 水平居中
space-around; //等同于居中，不过两端留有空间
flex-start; //内容紧靠着向左
flex-end; //内容紧靠着向右
align-items: center; //垂直居中
align-content:center; //设置行对齐 其他元素有 flex-start; flex-end; space-between; space-around; 修改 flex-wrap 属性的行为
flex-direction: row; 左对齐
column：纵向排列
flex：给弹性容器分配空间 如：flex:1; flex:2;
三、发送网络请求到后端
wx.request({
url: 'http://localhost:8888/memu/queryMenuList',
data: {
pageNum: this.data.pageNum,
pageSize: this.data.pageSize,
},
method: 'GET',
//成功后的回调函数
success: (res) => {
wx.hideLoading();
console.log(res);
if (res.data.code == 200) {
console.log(res.data.rows);
this.setData({
latelyList: res.data.rows
})
}
},
//失败的回调函数
fail: () => {},
//成功或者失败都会调用的回调函数
complete: () => {}
});
当然你也可以自己封装一下哈！
四、生命周期
onLoad：页面开始加载就会触发，其他夜间传过来的参数可以在这里接收，直接options.id(id：您的参数名) onShow：监听页面显示 onPullDownRefresh：监听用户下拉动作 onReachBottom：页面上拉触底事件的处理函数 tabBar页面
五、登录实现
wx.getUserProfile：获取用户信息方法wx.getUserProfile({
desc: 'desc',
success: (res => {
console.log("获取用户信息", res);
})
})
wx.login：小程序登录获取code方法 通过该方法获取code传给后端换取openId，之后就根据这个openId(唯一标识)判断用户是登录还是注册。
把用户数据存到缓存中
wx.setStorageSync('openId', res2.data.data.openId)
获取缓存中的用户信息
var openId = wx.getStorageSync("openId");
openId就相当于key(键) 怎么存怎么拿。
之后可以根据这个判断用户是否登录。
六、定时器
下面说两种（定时器setInterval、setTimeout，简单易用）
setTimeout（多少秒后跳转哪个页面）
setTimeout(function () {
// switchTab用于跳转tarbar内的页面
wx.switchTab({
url: '/pages/my/my',
})
}, 1000);
1秒后跳转到my页面
关闭定时器：clearTimeout(timeoutId) timeoutId：定时器id
setInterval （用途最多的就是验证码）
业务：点击获取验证码按钮之后开启一个60s的倒计时，并置灰按钮，60s之后恢复可点击状态。
定义的事件sendCode
sendCode: function(e) {
var that = this;
var times = 60
var i = setInterval(function() {
times--
if (times <= 0) {
that.setData({
color: "#ff6f10",
disabled: false,
getCode: "获取验证码",
})
// 清除定时器
clearInterval(i)
} else {
that.setData({
getCode: "重新获取" + times + "s",
color: "#999",
disabled: true
})
}
}, 1000)
},
页面
mini" type="default" plain="true" class='form-code-btn' bindtap='sendCode' style='color:{{color}}; border-color: {{color}};background-color:#FFF;' disabled="{{disabled}}">{{getCode}}
data中定义的值
/**
* 页面的初始数据
*/
data: {
color: "#ff6f10", //按钮颜色
disabled: false, //是否可以点击
getCode: "获取验证码", //显示文字
},
效果如下：
七、绑定事件
bindtap 与 catchtapbindtap="goCollect"catchtap也是一样的用法，但是它能阻止事件冒泡。 何为事件冒泡？ 如果你在内设立一个bindtap 事件，外面有两个事件包着，事件是从外往内执行。 而你使用catchtap结果就不一样了，它能直接找到你指定的那个事件，不经过外面那两个事件。 传参：data-name="牡丹";
goCollect: function () { }
值路径：currentTarget.dataset.name
在某事件上定义传参，只会在触发到这个事件才能传到对应的事件中。
跨页面传参的话，在监听页面加载的 onLoad 生命周期中接收参数。
好啦，就说到这里了。有问题可以下方留言哦。或者上微信小程序开发官网有你想要的哈哈哈！
小程序官网：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html
阿里妈妈的图标图：https://www.iconfont.cn/search/index