1.数据修改
this.setData({})用来修改数据，一般修改的都已key:value的格式修改，如下
Page({
data: {
person:"ren"}
},
onLoad: function() {
this.setData({
person:'人'
})
}
})对于数组修改：
Page({
data: {
person: {
uconf:[0,2,3,4,5]
}
},
methods: {
baudChange(e){
this.setData({
[`uconf[1]`]: e.detail.value,
[`uconf[${
{e.detail.value}}]`]: e.detail.value
})
}
}
})对于对象修改
Page({
data: {
person: {
"name": "人",
"age": 20
},
datas:{
aa:[],
bb:[[],[],[]]
}
},
onLoad: function() {
var person = this.data.person;
person.age = 18;
this.setData({
person
})
var datas= this.data.datas;
person.bb[0]= [12];
this.setData({
datas
})
}
})2.组件数据初始化
lifetimes:{
attached:function(){
this.setData({})//数据初始赋值
}}3.swiper 禁止滑动
<swiper-item catchtouchmove='catchTouchMove'>
...
</swiper-item>
catchTouchMove() {
return false;
},4.picker组件实现数组对象格式
//其中range为数据源，value为下标索引，bindchange为change改变事件
<picker range='{
{type}}' value='{
{idx}}' bindchange='Change' range-key="name" data-id='{
{type[index].id}}'>
<view class='picker'>{
{type[index].name}}</view>
</picker>
/**
* 页面的初始数据
*/
data: {
type: [{ name: '服务质量', id: 20 }, { name: '服务品质', id: 24 }, { name: '服务速度', id: 25}],
index: 0,//索引
},
Change: function (e) {
方法一：
通过对应数组索引访问：
consoel.log(type[e.detail.value].id);
方法二：
console.log('picker发送选择改变，索引值为', e.detail.value)
console.log("选中的id值:"+e.target.dataset.id)
console.log(e);
this.setData({
index: e.detail.value
})
}5.wx-if 和wx-for 不能同时使用如下
<view wx:if="{
{item.categoryId == idX}}" wx:for="{
{Data}}" wx:key="key">
<view>{
{item.name}}</view>
</view>
<view wx:else>暂无数据</view>
这样写会报错
使用block就没问题
列如:
<block wx:if="{
{item.categoryId == idX}}" wx:for="{
{Data}}" wx:key="key">
<view>{
{item.name}}</view>
</block>
<view wx:if={
{fff}}>暂无数据</view>
6.给拥有class名的标签添加动态class名
<button class="{
{true?'leftBtn activeBtn':'leftBtn'}}">是</button>
<button class="rightBtn">否</button>
//leftBtn rightBtn 为固定class名 activeBtn 为动态class名7.picker多个选项
<view class="picker flex" bindtap='radioChange'>
<view class="cen">
<view style="display: inline-block; color: red;">*</view>数据源：
<block class="check_item" wx:for="{
{grade}}" wx:key="index" wx:if="{
{item.checked == true?true:false }}"
data-value="{
{item.value}}">
<text class="chooseName">{
{item.key}}</text>
</block>
<image class="img" mode="widthFix" src="../../../img/arrow-select.png"></image>
</view>
</view>
<view class="modal-box {
{modalName?'cur':''}}" catchtouchmove="stopTouchMove">
<view class='modal-dialog'>
<view class="checkbox_box">
<view class="check_top">
<view class="check_tit">数据源选择（可多选）</view>
<view class="check_list">
<view class="check_item {
{item.checked?'checked':''}}" wx:for="{
{grade}}" wx:key="index" bindtap="multiple"
data-value="{
{item.value}}">{
{item.key}}
</view>
</view>
</view>
<view class="check_btn">
<view class="qk" bindtap='closeModal'>清空</view>
<view class="confirm" bindtap="checkConfirm">确定 <view class="countnum2" wx:if="{
{checkNum>0}}">({
{checkNum}})</view></view>
</view>
</view>
</view>
</view>
properties: {
nconf:{
type:Array,
value:["mqtt", "172.121.1.1", 1883, 300, "wwwww", "1111", "111", "topic", "top1", 0, 0, 1, 0, "遗嘱", [1, 6, 5, 21, 22], 1, 0]
//通道类型 服务器地址 端口 心跳 ClientID 用户名 密码 订阅 发布 追加IMEI 会话标志(持久会话0) QOS PubRetain 遗嘱 数据源 Transport Hex转换
}
},
data:{
grade :[
{
key: '串口1',
value: 1,
checked: false
},
{
key: '串口2',
value: 2,
checked: false
},
{
key: '串口3',
value: 3,
checked: false
},
{
key: '串口4',
value: 4,
checked: false
},
{
key: '控制台',
value: 5,
checked: false
},
{
key: '规则引擎',
value: 6,
checked: false
},
{
key: '自定义1',
value: 21,
checked: false
},
{
key: '自定义2',
value: 22,
checked: false
}
],
modalName: false,//模态框显隐
checkNum: 0,//选中数量
}
/*显示弹窗*/
radioChange: function () {
var that = this;
that.setData({
modalName: !that.data.modalName,
})
},
//关闭弹窗
closeModal: function (e) {
var that = this;
var nowgrade = that.data.grade
nowgrade.map(item => {
item.checked = false
})
that.setData({
grade: nowgrade,
checkNum: 0,
})
},
//点击选择
multiple: function (e) {
var that = this;
var value = e.currentTarget.dataset.value
var nowgrade = that.data.grade
var checkNum = []
nowgrade.map(item => {
if (item.value == value) {
item.checked = !item.checked
}
if (item.checked == true) {
checkNum.push('ok')
}
})
that.setData({
grade: nowgrade,
checkNum: checkNum.length
})
},
//点击确定走接口
checkConfirm: function () {
var that = this;
var nowgrade = that.data.grade
var paramsData = []
nowgrade.map(item => {
if (item.checked == true) {
paramsData.push(item.value)
}
})
let nconf = this.properties.nconf;
nconf[14]=paramsData;
that.setData({
nconf,
modalName: false,
})
},8.页面之间数据的传输及修改，如父页面传给子页面数据，子页面数据修改后传给父页面，相当于vue中的$on 和$emit.
//订单页js,order.js
//跳转去评论页的方法
fnToComment(){
wx.navigateTo({
url: `../comment/comment`,
events:{
//执行刷新订单的操作data是从评论页传递的参数
fnFefresh:function(data){
console.log(data)//此处接收的是comment.js传递的{data:'2222'}
}
},
success: function (res) {
//跳转comment页要执行的方法
res.eventChannel.emit('fresh', { data: '1111' })
}
})
},
//评论页js,comment.js
var eventChannel
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
eventChannel = this.getOpenerEventChannel()
// 监听fresh事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('fresh', function (data) {
console.log(data)//此处接收的是order.js传递的{data:'1111'}
})
},
//提交评论的方法同时刷新order.js的刷新订单方法
fnComment(){
//刷新order.js的events属性中的fnFefresh方法
eventChannel.emit('fnFefresh', { data: '2222' });
}
})
9.数据同一个数据频繁操作不能在原始数据上操作即使是原型链上也不行，不然会保存数据，对下来的数据操作进行干扰。如数组的push,pop等改变原数据的操作
modifyInstruct:function(e){//对应数据都为唯一地址
let modNewdata = [];// 清空数据 如果不清空 再次调用函数使用的是下面上次赋值过的数据
let data = JSON.parse(JSON.stringify(instructData))//转换赋值新的地址
data[index] = instruct;
modNewdata = JSON.parse(JSON.stringify(data))
modNewdata.unshift(modbusOld[0]);
console.log(modNewdata,data)
this.setData({
instructData:data,
modbus:modNewdata
})
}10.对于复杂的页面有时候初始化数据表现不一致，如下
//直接赋值
data:{port:{
"uconf": [
[1, 9600, 8, 0, 1, 19, 1, 20, "", 0],
[],
[]
],
"nconf": [
["mqtt", "117.34.118.44", 1883, 300, "863488058096796", "", "", "866262049424228/downData", "866262049424228/upData;0;866262049424228/controlReply;", 0, 0, 0, 0, "", [1], 0, 0],
[],
[],
[],
[],
[]
],
"mb": [
[2, 1, 21, [1], 1, 0, 0, "", "", "", 0, 500, 0, 5, 3],
[
[10, 96, "010300010001"],
[
["a", 1, "H", 1]
]
]
],
}}
//onload中赋值
onLoad(options) {
this.setData({
port:{
"uconf": [
[1, 9600, 8, 0, 1, 19, 1, 20, "", 0],
[],
[]
],
"nconf": [
["mqtt", "117.34.118.44", 1883, 300, "863488058096796", "", "", "866262049424228/downData", "866262049424228/upData;0;866262049424228/controlReply;", 0, 0, 0, 0, "", [1], 0, 0],
[],
[],
[],
[],
[]
],
"mb": [
[2, 1, 21, [1], 1, 0, 0, "", "", "", 0, 500, 0, 5, 3],
[
[10, 96, "010300010001"],
[
["a", 1, "H", 1]
]
]
],
}
})
}
两种赋值，第二种部分数据没初始化，两种页面表现不一致可以通过添加新页面本地存储数据，然后在主页面赋值，主页面的子组件同时赋值，让主页面和子组件数据表现一致
11. eventChannel.on是一个异步操作，如果要同步数据，直接在函数里面进行赋值