微信小程序之前端代码篇
本篇主要讲述一些，不太常用但用起来又不太会的组件、和一些逻辑思考等。
1、Dialog的使用
①首先引入vant-weapp中的dialog
{
"usingComponents": {
"van-dialog": "/miniprogram_npm/@vant/weapp/dialog/index"
}
}
②然后在xxx.wxml中注册该组件，位置随意，后面可以利用wxss进行修改。
<van-dialog id="van-dialog" />
③最后对应xxx.js中引入Dialog，并在对应的点击事件中使用即可
import Dialog from \'../../miniprogram_npm/@vant/weapp/dialog/dialog\'; signUp: function(event) { Dialog.alert({ title: \'期待你的加入！\', message: \'112102\', }); },
2、针对不同用户身份，展示不同页面。
当时，想了很多方法，关于display:none，微信小程序是否自带API可以隐去页面等等，但都失败了。
最后决定，由后端进行身份判断，并传来状态码。根据后端传来的状态码，进行条件判断，从而进行页面的展示。
<!-- 普通学生展示的接单页面 --> <view wx:if="{{ code==2 }}" class="noVolunteerview"> <image class="noVolunteer" src="../images/noVolunteer.jpg" /> </view>
3、微信小程序发送请求（wx.request的使用）+传递数据至数据库
①首先，绑定data-xxx，从而将数据同步到事件event的属性中
<button class="btn2" bindtap="showModal" data-ono="{{item.Ono}}">投诉</button>
② 详见代码注解及编号
Page({ //页面的初始数据 data: { tip: \'\', buttonDisabled: false, modalHidden: true, show: false, //2.定义获取到的数据要存放的变量 oo: \'\', complaints: \'\' //存储前端输入的投诉内容 }, //1.1获取当前输入的投诉内容 complaints:function(e){ this.setData({ complaints:e.detail.value }); }, //1.2点击投诉按钮触发的事件，为了获取数据 showModal:function(e){ var o = e.target.dataset.ono; this.setData({ oo : o, //将当前事件获取到的变量信息（这些信息都是后端接口传过来的），如ono/telphone都赋给data定义中的变量 }) }, //3.点击modal组件中的确认按钮触发的事件 modalBindaconfirm:function(){ var that = this; this.setData({ modalHidden:!this.data.modalHidden, show:!this.data.show, buttonDisabled:!this.data.buttonDisabled, }) //将填写的投诉内容（已经保存到data变量中了） 传到数据库 wx.request({ url: \'http://..../insertComplaints.php\', method:\'POST\', //只要传递数据，就要改成POST方式 data: { Ono : that.data.oo, //将data数据传递给后端，后端接收的变量名是Ono Complaints : that.data.complaints, }, header: { \'content-type\': \'application/x-www-form-urlencoded\' }, success (res) { if(res.data.code === 0){ wx.showModal({ title:\'提示\', content:\'投诉成功！\', showCancel:false, }) }else if(res.data.code === 2){ wx.showModal({ title:\'提示\', content:\'投诉失败！\', showCancel:false, }) } }, fail(res){ wx.showModal({ title:\'提示\', content:\'网络不在状态！\', showCancel:false }) } }) } })
4.页面跳转
一、当要跳转到tabBar及导航页面的时候，只能使用 wx.reLaunch！
①tabBar的定义
"tabBar": { "color": "#000", "selectedColor": "#569bed", "backgroundColor": "#f2f2f2", "list": [ { "pagePath": "pages/send/send", //对应的页面 "text": "发单", "iconPath": "pages/images/tabImg/s.jpg", //未选中的样式 "selectedIconPath": "pages/images/tabImg/s1.jpg" //选中的样式 }, { "pagePath": "pages/receive/receive", "text": "接单", "iconPath": "pages/images/tabImg/r.jpg", "selectedIconPath": "pages/images/tabImg/r1.jpg" } ] }
②页面跳转
change(){ wx.reLaunch({ url: \'../send/send\', }) }
二、普通的页面跳转，使用wx.switchTab即可
//返回按钮消除 <button bindtap="preYemian">返回</button>
preYemian(){ wx.switchTab({ url: \'/pages/my/my\', }) },
5.下拉刷新
当使用下拉刷新时，一定要先去app.json中window下，配置允许下拉刷新，即"enablePullDownRefresh": true,
"window": { "backgroundTextStyle": "dark", "enablePullDownRefresh": true, "onReachBottomDistance": 50 //刷新高度 },
6、续--另外的补充
-
-
小程序的图片只支持https://…的URL，后台接口不能传//或http://，否则有些安卓机会不兼容。
-
不要换行写，有空格不行；如果代码换行，页面也直接换行。
-
部分CSS3不可使用，比如
transform:rorate(180reg)不可使用。 -
wx.navigateTo 新窗口打开页面 新页面有返回按钮；
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面 新页面没有返回按钮。
-
分享事件不支持同步
如果想自定义分享图片，则在生命周期onShareAppMessage中编写；但是
onShareAppMessage不能支持异步，如果想从接口里获取分享图片URL，必须在onLoad提前读取并放入data中。 -
小程序有并发限制
wx.request、wx.uploadFile、wx.downloadFile的最大并发限制是 10 个。如果并发量大于10，需要写请求队列，以等待请求。
本次分享就到这里啦，下一次是关于后端语言的处理(*^▽^*)
