小程序开发过程中的问题梳理

1.小程序中wxml的mastache语法不支持js的方法，例如Math.abs() toString() 等

解决方法：使用小程序脚本语言WXS。

需求： 后台返回的数据在wxml中渲染时需要取绝对值。

使用示例：

<!--wxml-->
<wxs module='m1'>
  var handleRank = function(rank){
    return Math.abs(rank)
  }
  module.exports.handleRank = handleRank;
</wxs>

<view>本次训练的成绩不错，相较于上次班级排名提升了{{m1.handleRank(result.RankingCDiff)}}名</view>

---

2. 小程序不支持解析带html标签的文档内容

解决方法： 使用WxParse，微信小程序富文本解析自定义组件，支持HTML及markdown解析。

使用方法：
1. 在WxParse官网下载项目，复制wxParse文件夹。
2. 引入文件。
       在要使用的page模块，wxml、wxss、js文件中分别引入wxParse文件夹中对应格式的文件。



3. 数据绑定与模板引用
(1) 一条html字符串解析

• WxParse.wxParse(bindName , type, data, target,imagePadding)
• 1.bindName绑定的数据名(必填)
• 2.type可以为html或者md(必填)
• 3.data为传入的具体数据(必填)
• 4.target为Page对象,一般为this(必填)
• 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
  例如：

var conent = "<span style=' font-family:"微软雅黑","sans-serif"; '>下列选项中，不能表示具有相反意义的量的是</span><span lang=EN-US style='font-family:"微软雅黑","sans-serif"; '>(<span style=''>    </span>) </span>"
var that  = this
WxParse.wxParse('Content', 'html', content,that)

模板引用：

<template is="wxParse" data="{{wxParseData:Content.nodes}}" />

(2) 数组解析
第一种是数组中每一项直接为html字符串，例如：

 var replyArr = [
   '<span>我是文本内容</span>',
   '<span>我是文本内容</span>',
   '<span>我是文本内容</span>'
]

for(var i = 0; i < replyArr.length; i++){
   Wxparse.wxParse('reply'+i,'html',replyArr[i],that);
   if(i === replyArr.length-1){
   	Wxparse.wxParseTemArray('replyTemArray','reply',replyArr.length,that)
   }
}

模板引用：

<view v-for="{{replyTemArray}}" wx:key="index">
   <template is="wxParse" data="{{wxParseData:item}}" />
</view>

第二种是数组由多个对象构成，使用wxParse解析时只需要解析对象中的某一个属性，例如：


只需要解析对象中Body[0]中的Content属性，按照官方方法：

for(var i = 0; i < result.length; i++){
	let content = result[i].Body[0].Content
	Wxparse.wxParse('reply'+i,'html',content,that)
	if(i === result.length-1){
		Wxparse.wxParseTemArray('replyTemArray','reply',result.length,that)
	}
}

// 这是只对Content进行了解析，之前result数组中每一项的其他属性例如Idx等，在replyTemArray数组中都已丢失，所以需要对有用的属性进行重新赋值

let listData = that.data.replyTemArray
for(var i = 0; i < result.length; i++){
    listData.map((item, index, arr) => {
        arr[index][0].Name = result[index]['Name']
        arr[index][0].Score = result[index]['Score']
        arr[index][0].UserScore = result[index]['UserScore']
        arr[index][0].Idx = result[index]['Idx']
    })
}
 that.setData({
 	list: listData 
 })

模板引用：

<view wx:for="{{list}}" wx:key="index" class="question-wrap" bindtap="onLinkToDetail" data-idx="{{item[0].Idx}}" data-name="{{item[0].Name}}">
  <view class='question-title'>
    <view class="question-title-name">{{item[0].Name}}</view>
    <template is="wxParse" data="{{wxParseData:item}}" />
  </view>
  <view class='question-result'>
    <view>得分：<text class='score'>{{item[0].UserScore}} </text>分</view>
    <view>满分：<text class='score'>{{item[0].Score}} </text>分</view>
  </view>
</view> 

---

3. 小程序页面传递参数中带有 ？ 或者 = 会被截取

小程序中，A页面跳转到B页面时需要在url后携带一条字符串参数，当字符串中带有？ 或者 = 时，该字符串在B页面中接收时会被截取。
解决办法：
跳转前使用encodeURIComponent 进行转码， 接收时使用decodeURIComponent 解码。
例如：

// A页面
let str= '<span style="color:red">您对孩子们的学习状况了解吗？请回答</span>'
// 直接将str传过去会导致字符串被截取为'<span style="color:red">您对孩子们的学习状况了解吗'
let content = encodeURIComponent(str)  // 先进行转码
wx.navigateTo({
    url: '../message/message?content=' + content
})

// B页面
onLoad: function (options) {
    let that = this
    let content = decodeURIComponent(options.content) //解码
    that.setData({
      date: options.date
    })
    WxParse.wxParse('content','html',content,that)
}

---

4. 小程序中阻止事件冒泡

使用bind的绑定事件是会触发冒泡事件，使用catch不会触发冒泡事件。
将子元素的bindtap修改为catchtap即可。

---

5. 小程序setData key支持变量

使用es6新特性： this.setData({ [key]: value })

---

6. Wx.request() 不加header会请求出错

	header: {
		'content-type': 'application/x-www-form-urlencoded'
	}