- 相对路径、目录结构
'./'表示当前目录（非my_jsdoc.js，而是‘目录’！），'../'表示上一级目录。
示例中，第一个"../"表示当前目录（launchPage）的上一级目录（Logins），
第二个'../'表示再往上一级目录到（pages），
第三个'../'表示pages的上级目录，即根目录，
然后根目录下寻找'/utils'目录，最终找到目标文件utils.js；
在上面的相对路径中，还可以在开头加上'./'，表示当前目录。但这个'./'可以省略，因为默认就是从当前目录开始的。
- 扩展运算符 ... 可以将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
- 事件处理函数bindtap
在视图中定义了按钮单击事件，并绑定处理该单击事件的函数，则需要在Page中定义该事件函数。
wxml:
<view bindtap="viewTap">单击我</view>
<-- catchtap跟bindtap的区别：catchtap可以阻止冒泡事件！只有当前view响应点击事件，事件不会穿透到下层视图 -->
<view catchtap="viewTap2">单击我</view>
Page:
Page({
viewTap: function() {
console.log('hello, tap me!')
},
viewTap2: function() {
console.log('hello, tap me 2!')
}
})
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可用于：
内容
<view> {{ message }} </view>
组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
...
见官网：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
;.js需要先定义属性；其中data是创建页面自动生成的，data是关键字，是页面的数据对象；当前所有数据需要定义在data对象内，作为属性。如下例的someText
.js
Page({
data: {
someText: "Morning, Zark!",
myColor: '#ff0000',
},
someFunction: function() {
this.setData({someText:"Good night,Zark!"})
}
})
.wxml:
<text style='color:{{myColor}};'>{{someText}}</text>
数据的引用：上面一行代码展示了在标签属性（style，以及其他属性）中，和标签的值中，分别是如何引用.js中定义的属性的。在标签属性中，引用需要包含在引号内；作为标签的值，则不可以加引号。
.js文件中如果直接用this.data.someText="Good night,Zark!"，是不能改变<text>内显示的内容的，
this.setData({someText:"Good night,Zark!"})，才能使UI和数据同步刷新！
;
<view wx:if="{{num > 100}}">大于100</view>
<view wx:elif="{{num > 30}}">大于30</view>
<view else>小于等于30</view>
;
//block什么也不干，只是相当于一个大括号括起来的代码块，方便对一块代码进行统一管理。
<block wx:if="{{condition}}">
<view>show view1</view>
<view>show view2</view>
</block>
或安卓里的 
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//使用 wx:for-item 可以指定数组当前元素的变量名，
//使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
text换行问题
去除中文后面空的占位，word-break: keep-all;
中文字符不再上浮，接下来要解决的是换行的问题word-wrap: break-word;
https://blog.csdn.net/qq_37465264/article/details/80234913
列表渲染：多数组数据提取，标记点击事件id
这里的'id'可以是任何自定义的名称，如，.wxml可以是data-row='{{index}}'；
对应的，在.js中就要用e.currentTarget.dataset.row取值
.js
data: {
iconUrls: ["../../../../img/personalCenter/purse_account_detail.png", "../../../../img/personalCenter/purse_cashout_record.png"],
listTitles: ["账户明细", "提现记录"]
},
...
cellClicked: function (e) {
let index = e.currentTarget.dataset.id;
console.log(e.currentTarget.dataset.id)
if (index == 0) {
wx.navigateTo({
url: './accountDetail/accountDetail',
})
}else if (index == 1) {
}
},
.wxml
<view class='cell' wx:for="{{listTitles}}" wx:for-index="index" bindtap='cellClicked' data-id='{{index}}'>
<view class='cellContent'>
<view class='cellLeftView'>
<image class='cellIcon' src="{{iconUrls[index]}}"></image>
<text>{{item}}</text>
</view>
<image class='cellArrow' src='../../../../img/personalCenter/list_arrow_right.png'></image>
</view>
<view class='cellSp'></view>
</view>
条件渲染
-
效果：（列表背景不一样）
条件渲染
- 1 、新建文件 rankingBgTool.wxs，内容如下（小程序内view背景图片只能用base64编码，网上随便搜图片转base64）：
var backgroundUrlGenerator = {
urlforRanking: function(row) {
var url = ''
if (row == 0) {
url = 'data:image/png;base64,iVBORw......5ErkJggg=='
} else if (row == 1) {
url = 'data:image/png;base64,iVBORw0KG.........Jggg=='
} else {
url = 'data:image/png;base64,iVBORw0KGgo.........Jggg=='
}
return url;
}
}
module.exports = {
urlforRanking: backgroundUrlGenerator.urlforRanking
}
- 2、然后在invitationDetail.wxml文件中导入（顶部写就可以，不用包含在其他wxml标签内），其中的'urlGen'是可任意自定义别名，src必须是相对路径！！不要忘了关闭标签的斜杠。
<wxs module='urlGen' src='./rankingBgTool.wxs'/>
使用：
<scroll-view scroll-y class='tableView'>
<view class='cell' wx:for='{{friendArray}}' wx:for-item='cellDic2' wx:for-index='row'>
<view class='cellContentView' style='background-image:url({{urlGen.urlforRanking(row)}});'>
...
</view>
</view>
</scroll-view>
类似的，还可以用.wxs工具对渲染的数据加工，比如对小数点位数进行控制等。
.wxs文件日期处理
daysRemain: function (dateString) {
//dateString format: yyyy-MM-dd HH:mm:ss
var date_apply = getDate(dateString)
var interval_date = date_apply.getTime()
var interval_after3d = interval_date + (24*60*60*1000)*3
var threeDaysAfterApplay = getDate(interval_after3d)
var today = getDate()
var interval_today = today.getTime()
var interval = interval_today - interval_date
//含小数，如果传入的是过去的时间，则结果为正数，否则为(负数 || 0)
var days = interval/(24*60*60*1000)
},
因为小程序限制总大小<2M（电脑上无限制，但上传就有限制），所以，本地高清大图就不要想了，我都是用宽度400像素以下的图片，质量当然一般，但也过得去；能用代码的就用代码（比如纯色按钮，渐变色liner-gradient按钮等）
回调失败信息展示（err.errMsg）
fail: function (err) {
console.log(err)
wx.showToast({
icon: 'none',
title: err.errMsg,
})
},
. text插入空格
两种方式
<text space="ensp">这是空格 哈</text>
<text decode="{{true}}">你好，   哈哈哈</text>
