最近这段时间接了一个小程序的开发，开发了一段时间，总结一些经验，与大家交流下。
1.小程序的头部title，可以在json里配置，也可以动态修改。
2.微信小程序连续点击跳转页面会跳转多个页面，可以加个公共方法，可以加在util.js里，比如：
let button =
true
const buttonClicked =
function() {
let that=
this
that.button=
false
setTimeout(
function () {
that.button=
true
},
500)
}
module.exports = {
button,
buttonClicked
}
在这样引入
const util =
require(
'../../utils/util.js')
if (util.button) {
util.buttonClicked()
wx.navigateTo({
url:
'../register/frist/frist',
})
}
路径要对应自己的
3.wx.resquest默认是get，post请求要加header,你最好封装下你的wx.resquest,以便以后做统一拦截，也可以加在util.js里，比如：
//ajax post
const post=(url,data,callback,callbackError)=>{
wx.request({
url: url ,
method:
"post",
header: {
"Content-Type":
"application/x-www-form-urlencoded" },
data: data,
success:
function (res) {
if (res.data.success){
callback(res)
}
else{
closeLoading()
let r = /登录过期/;
if (r.test(res.data.msg)) {
toastMsg(res.data.msg)
let time = setTimeout(
function () {
wx.navigateTo({
url:
'/pages/login/login',
})
},
1500)
}
else {
toastMsg(res.data.msg)
}
}
},
fail:
function(error){
closeLoading()
if (callbackError){
callbackError(error)
}
}
})
}
get,同理，引用跟第2点一样。
4.引入图片，你如果是用image引入本地图片，在手机浏览没有问题，但如果是用背景图片的方式引入本地图片，那就尴尬了，开发工具显示没问题，但在真机上浏览，你就会发现图片不会显示，解决办法有2个：1改成image引入，再用绝对定位：2就是引入网络图片比如http://www.xxx.com./test.png
5.上传文件wx.uploadFile。他的参数 filePath是Sring类型的，代表只能是路径，且只能是一个路径，所以不能一次上传多张图片。如果要上传多张图片，只能一张一张传，可以用promisef封装下wx.uploadFile，这样就不会陷入回调地狱。当然小程序也不支持formdata,所以这条一次上传多条的路也死了，且也堵死了上传blob类型的途径，自然而然当你拿到base64的图片，你无法转成blob在传给后台，这是你只能post这个base64的字符串给后台，让后台去转成图片，后台一般用byte[]接收，毕竟它很长。
6.一个自己写的基于picker-view的picker组件，毕竟小程序自带的picker组件连颜色都不能改。结构
wxml
view
class=
'mypicker'
hidden=
"{{!isShow}}">
<
view
class=
'shadow'
bindtap=
'hidePicker'></
view
>
<
view
class=
'content'>
<
view
class=
'picker-head'>
<
text
class=
'cancle'
bindtap=
'hidePicker'>取消
</
text
>
<
text
class=
'sure'
bindtap=
'_successEvent'>确认
</
text
>
</
view
>
<
picker-view
class=
'picker-view'
indicator-style=
"height: 100rpx;"
value=
"{{value}}"
bindchange=
"bindChange">
<!-- 一列picker -->
<
block
wx:if=
"{{column==='1'}}">
<
picker-view-column
>
<
view
wx:for=
"{{list}}"
style=
"line-height: 68rpx">{{item.name}}
</
view
>
</
picker-view-column
>
</
block
>
<!-- 两列picker -->
<
block
wx:if=
"{{column==='2'}}">
<
picker-view-column
>
<
view
wx:for=
"{{list}}"
style=
"line-height: 68rpx">{{item.name}}
</
view
>
</
picker-view-column
>
<
picker-view-column
>
<
view
wx:for=
"{{secondClo}}"
style=
"line-height: 68rpx">{{item.name}}
</
view
>
</
picker-view-column
>
</
block
>
<!-- 三列picker -->
<
block
wx:if=
"{{column==='3'}}">
<
picker-view-column
>
<
view
wx:for=
"{{list}}"
style=
"line-height: 68rpx">{{item.name}}
</
view
>
</
picker-view-column
>
<
picker-view-column
>
<
view
wx:for=
"{{secondClo}}"
style=
"line-height: 68rpx">{{item.name}}
</
view
>
</
picker-view-column
>
<
picker-view-column
>
<
view
wx:for=
"{{thirdClo}}"
style=
"line-height: 68rpx">{{item.name}}
</
view
>
</
picker-view-column
>
</
block
>
</
picker-view
>
</
view
>
</
view
>
js
/ components/mypicher/mypicker.js
Component({
/**
* 组件的属性列表
*/
properties: {
isShow: {
type: Boolean,
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value:
false,
// 属性初始值（可选），如果未指定则会根据类型选择一个
},
column: String,
value: {
type: Array,
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: [
0,
0,
0],
// 属性初始值（可选），如果未指定则会根据类型选择一个
observer:
function (newVal, oldVal) {
// 属性被改变时执行的函数（可选）
console.log(newVal, oldVal)
this.setData({
value: newVal
})
}
},
list:{
//格式[{name:"",data:[{name:"",data:[]}]}]
type: Array,
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: [],
// 属性初始值（可选），如果未指定则会根据类型选择一个
observer:
function (newVal, oldVal) {
// 属性被改变时执行的函数（可选）
let inx =
this.data.value
console.log(newVal)
console.log(oldVal)
console.log(
this.data.column)
if (
this.data.column==
"2"){
this.setData({
secondClo: newVal[inx[
0]].data
})
}
if (
this.data.column ==
"3") {
this.setData({
secondClo: newVal[inx[
0]].data,
thirdClo: newVal[inx[
0]].data[inx[
1]].data
})
}
}
}
},
/**
* 组件的初始数据
*/
data: {
isShow:
true,
secondClo:[],
thirdClo:[]
},
/**
* 组件的方法列表
*/
methods: {
bindChange:
function (e) {
const newVal = e.detail.value
const oldVal =
this.data.value
let data =
this.data.list
if (
this.data.column ==
"2") {
if (oldVal[
0] != newVal[
0]){
this.setData({
secondClo: data[newVal[
0]].data
})
}
}
if (
this.data.column ==
"3") {
if (oldVal[
0] != newVal[
0]) {
this.setData({
secondClo: data[newVal[
0]].data,
thirdClo: data[newVal[
0]].data[
0].data
})
}
if (oldVal[
1] != newVal[
1]) {
this.setData({
thirdClo: data[newVal[
0]].data[newVal[
1]].data
})
}
}
this.setData({
value: e.detail.value
})
},
//隐藏picker
hidePicker() {
this.setData({
isShow:
false
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_successEvent() {
console.log(
"addas")
//触发成功回调
this.setData({
isShow:
false
})
var myEventDetail =
this.data.value
console.log(
this.data.value)
this.triggerEvent(
'myevent', myEventDetail)
}
}
})
wxss
.mypicker{
width:
100%;
height:
100%;
position:
fixed;
left:
0;
top:
0;
z-index:
100
}
.shadow{
width:
100%;
height:
100%;
position:
absolute;
left:
0;
top:
0;
background:
#000;
opacity:
0.5
}
.content{
height:
590
rpx;
width:
100%;
position:
absolute;
left:
0;
bottom:
0;
background:
#fff
}
.picker-view{
text-align:
center;
width:
100%;
height:
400
rpx;
line-height:
100
rpx
}
.picker-head{
height:
80
rpx;
line-height:
80
rpx;
font-size:
40
rpx;
border-bottom:
2
rpx
solid
#ddd;
padding:
0
40
rpx
}
.cancle{
color:
#999
}
.sure{
color:
#3B76D8;
float:
right
}
json
{
"component":
true,
"usingComponents": {}
}
引入使用比如是index
wxml
<
my-picker
column=
"{{pickerClo}}"
list=
"{{pickerList}}"
value=
"{{pickerValue}}"
isShow=
"{{pickerIsShow}}"
bindmyevent=
'myevent'></
my-picker
>
js
data: {
pickerValue: [
0],//picker value值
pickerList: [1,2,3],//picker 数据
pickerIsShow:
false,// 是否显示 picker
pickerClo:
"1",// picker 几列
},
myevent:
function(e){
console.log(
e.detail)
},
json
{
"usingComponents": {
"my-picker":
"../../../components/mypicker/mypicker"
}
}
以上就是我的经验，还在开发中，也许会持续跟新，有问题可以提出来，希望可以和大家交流