⼩程序之前端代码篇
本篇主要讲述⼀些，不太常⽤但⽤起来⼜不太会的组件、和⼀些逻辑思考等。
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的属性中
　投诉理由：<input bindinput="complaints"/>
<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.;
this.setData({
oo : o,  //将当前事件获取到的变量信息（这些信息都是后端接⼝传过来的），如ono/telphone都赋给data定义中的变量    })
},
//3.点击modal组件中的确认按钮触发的事件
modalBindaconfirm:function(){
var that = this;
this.setData({
modalHidden:!dalHidden,
show:!this.data.show,
buttonDisabled:!this.data.buttonDisabled,
})
//将填写的投诉内容（已经保存到data变量中了）传到数据库
url: '..../insertComplaints.php',
method:'POST', //只要传递数据，就要改成POST⽅式
data: {
Ono : ,  //将data数据传递给后端，后端接收的变量名是Ono
Complaints : that.dataplaints,
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success (res) {
if(de === 0){
wx.showModal({
title:'提⽰',
content:'投诉成功！',
showCancel:false,
})
}else if(de === 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(){
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,
vbs小程序代码大全"onReachBottomDistance": 50  //刷新⾼度
},
6、续--另外的补充
css伪类看不到，Styles不会显⽰css伪类，喜欢写::before或:first-child的请注意，伪类在控制台是看不到的。
⼩程序的图⽚只⽀持…的URL，后台接⼝不能传//或，否则有些安卓机会不兼容。
不要换⾏写，有空格不⾏；如果代码换⾏，页⾯也直接换⾏。
部分CSS3不可使⽤，⽐如transform:rorate(180reg)不可使⽤。
wx.navigateTo 新窗⼝打开页⾯新页⾯有返回按钮；
分享事件不⽀持同步
如果想⾃定义分享图⽚，则在⽣命周期onShareAppMessage中编写；但是onShareAppMessage不能⽀持异步，如果想从接⼝⾥获取分享图⽚URL，必须在onLoad提前读取并放⼊data中。
⼩程序有并发限制
请求队列，以等待请求。
本次分享就到这⾥啦，下⼀次是关于后端语⾔的处理(*^▽^*)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。