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

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

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

需求: 后台返回的数据在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 = "下列选项中,不能表示具有相反意义的量的是(    ) "
var that  = this
WxParse.wxParse('Content', 'html', content,that)

模板引用:

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

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

 var replyArr = [
   '我是文本内容',
   '我是文本内容',
   '我是文本内容'
]

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解析时只需要解析对象中的某一个属性,例如:
小程序开发过程中的问题梳理_第1张图片
小程序开发过程中的问题梳理_第2张图片
只需要解析对象中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= '您对孩子们的学习状况了解吗?请回答'
// 直接将str传过去会导致字符串被截取为'您对孩子们的学习状况了解吗'
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'
	}

你可能感兴趣的:(小程序开发过程中的问题梳理)