使用微信小程序实现国家代码下拉框显示以及wxs的正则坑洼点解析

//wxml代码部分
`
<wxs src="../../app.wxs" module="app" />
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

<view>

<text style="line-height:80rpx;float:left">{{app.sliceStr(array[index])}}</text>

<image src="/image/arrow_right.png" mode="aspectFit" style="width:28rpx;height:28rpx; margin-top:26rpx;"/>

<!-- 行间样式不必使用rpx，使用px即可，任何设备都可自适应，当然用也不要紧-->

</view>

</picker>`
// wxs代码部分
wxs是用来干嘛的？
在我理解主要是修复了微信小程序解析的一些问题，比如在wxml页面中不能调用对象的方法，如字符串的toString,slice,subString,数组的join,push等方法,数字的toFixed()等方法。但是在支付宝小程序中的html页面中是可以解析表达式的，例如{{price.toFixed(2)}}。而微信端需要使用自己的wxs格式进行定义或者说封装函数。

下面看我封装的

//app.wxs

  

var foo = "'hello world' from comm.wxs";

var bar = function (d) {

return d.split("\*").join(',');

}

var array = function (arr) {

return arr.some(function (item) {

return item.desc

}, this)

}

var fixedPrice = function (price) {

var price = parseInt(price);

return price.toFixed(2);

}

**
//代码块01 兼容第二次操作
var sliceStr = function(str){

var reg = '[\u4e00-\u9fa5\]';

return str.replace(getRegExp(reg, 'g'), " ");

}
**
//代码块02 没法兼容第二次操作~~~~
**var sliceStr = function(str){

return "+" + str.slice(6);

}**
module.exports = {

foo: foo,

bar: bar,

array: array,

fixedPrice: fixedPrice,

sliceStr: sliceStr

};

//js代码部分

page({
data:{
index: 0,//默认数组的下标
array: ['中国大陆 +86', '香港 +852', '美国 +1', '澳门 +853', '日本 +81', '台湾 +886', '韩国 +82','俄罗斯 +7']
},
//点击改变输入框的值

bindPickerChange(e) {

console.log('picker发送选择改变，携带值为', e.detail.value);

var phone = e.detail.value + '';

phone = parseInt(phone.replace(/[ ]/g,""))

this.setData({

index: phone,

});

},
})

//关于怎么导入模块见我上面的wxml代码第一行。然后引用函数见我上面wxml代码的加粗的部分。

//好了最后说下关于wxs的正则表达式的规则。官网权威点击进入
点击进入官网wxsAPI

但是官网给的解释也就短短几行，少得可怜。

根据我提供的图片 当点击+86的时候，弹出一个picker，然后点击选择item，相当于选择了数组的下标。

这里说下为什么不使用substring和slice截取字符串，那是因为初始化的时候截取是没问题的，但是在用户点击选择了以后，即发生渲染，这个方法就会在进行一次截取字符串。所以楼主这边使用正则表达式进行过滤数组中的中文字，起到兼容操作。即不管是初始化还是修改了以后都能显示+ <number>的形式。