小程式開發的一些經驗（自定義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'>
<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: 590rpx;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background: #fff
}
.picker-view{
text-align: center;
width: 100%;
height: 400rpx;
line-height: 100rpx
}
.picker-head{
height: 80rpx;
line-height: 80rpx;
font-size: 40rpx;
border-bottom: 2rpx solid #ddd;
padding: 0 40rpx
}
.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"
}
}
7.小程式的web-view元件中的url不能有中文或“{}”，否則在ios的環境下會白屏。
8.圖片轉base64，這個方法有兩個，第一個是利用request這個方法在開發工具上ok，但是真機上會報錯，pass。
第二個是用canvas的canvasGetImageData屬性，具體方法可以百度，但你要引入兩個js"upng"和“pako”,但這個會轉成png格式大小，圖片的大小會變大。
以上就是我的經驗，還在開發中，也許會持續跟新，有問題可以提出來，希望可以和大家交流