小程序开发的一些经验（自定义picker组件）

最近这段时间接了一个小程序的开发，开发了一段时间，总结一些经验，与大家交流下。

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'>

<