一 app.wxss
app.wxss里的样式是全局的
二 wx:for 内容循环
<block wx:for="{{hotelList}}">
<navigator url="{{item.pageurl}}?title={{item.name}}">
<view id="{{item.hotelID}}" data-index="index">
<image class="leftBuilding" src="/images/building.png"></image>
<text>{{item.name}}</text>
<image src="/images/right-arrow.png" class="rightArrow"></image>
</view>
</navigator>
</block>
三 wx:if 条件选择
<block wx:for="{{hotelList}}">
<navigator url="{{item.pageurl}}?title={{item.name}}">
<view id="{{item.hotelID}}" data-index="index">
<image class="leftBuilding" src="/images/building.png"></image>
<text>{{item.name}}</text>
<image src="/images/right-arrow.png" class="rightArrow"></image>
</view>
</navigator>
</block>
提示:也可以在{{这里面进行判断}},如:{{index>arr.length?’真’:’假’}},通常控制UI组件显示状态
四 navigator
实现前端a标签操作,实现页面跳转。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
url | String | 应用内的跳转链接 | |
redirect | Boolean | false | 是否关闭当前页面 |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class=”none”时,没有点击态效果 |
<navigator url="{{item.pageurl}}?title={{item.name}}">
新页面打开
</navigator>
提示 function(options)
1.url页面地址后面可以挂参数,在目标页面的onload事件里的函数通过参数options来获取传递的参数。
2.参数数据类型如果是数组[],会被转换成字符串处理,可以在目标页通过split()处理。
3.如果参数式json对象{},传递前要先通过obj.JSON.stringify()转换成json字符串,在目标页面通过obj.JSON.parse()再转回json对象
五 事件
wxml:
<input data-index="{{index}}" data-name="wc" value="{{item}}" bindtap="datasetTest"/>
js:
datasetTest:function(e){
/**
*业务逻辑
*/
console.log(e);
}
运行截图:
提示 function(e)
标签内可以通过data-[自定义name]的形式携带参数,在事件里可以通过e.target.dataset.name的方式获取。
六 modal模态框
<modal
hidden="{{hidemodal}}"
title="房间添加"
confirm-text="确定"
cancel-text="取消"
bindconfirm="bindAddConfirm"
bindcancel="bindAddCancel"
>
确定添加新房间 {{newHotelName}} 吗?
</modal>
注意:
1.通过动态改变hidden的true/false来控制模态框的显示与隐藏。
2.模态框里的bindconfirm用来真正执行某一个事件操作
七 toast 消息提示框
常用方法wx.showToast(OBJECT)。
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 2000
})
**注意:**icon只支持success,loading图标。
八 数组与UI
问题
1.增加或删除一个UI组件(这个UI组件是通过数据动态渲染的),其他UI组件的数据内容被刷新
2.数据同步问题
处理
—增加:
//添加房间输入框UI
plusAddRoomUI:function(e){
this.setData({
moreRoomUI:this.data.moreRoomUI.concat([''])
});
console.log(this.data.moreRoomUI);
}
—删除:
//删除添加房间输入框UI(任意位置删除或最后位置删除选一)
removeRoomUI:function(e){
/**
* 从最后一个位置开始删除
*/
// this.data.moreRoomUI.pop();//删除最后一个UI
// this.setData({
// moreRoomUI:this.data.moreRoomUI
// });
/**
* 任意位置删除,but 如果从非最后一个位置删除,那么其他位置的UI内容都会被刷新
*/
this.data.moreRoomUI.splice(e.target.dataset.index,1);//删除单击(选中)的UI
this.setData({
moreRoomUI:this.data.moreRoomUI
});
console.log("id=",e.target.id,this.data.moreRoomUI);
}
—动态改变 利用wx:key=”{{unique}}” 指定列表中项目的唯一的标识符
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
wxml:
<switch type="switch" wx:for="{{objectArray}}" wx:key="id" id="{{index}}" > {{item.unique}}
</switch>
js:
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; i++) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
console.log(x,y);
}
this.setData({
objectArray: this.data.objectArray
})
}
小总结:
一:向数组中添加数据
1.通过arr[arr.length]=”new value”
2.通过arr.push(‘new value’)
3.通过临时数组拼接原始数组的方式arr.concat(tempArr)或者tempArr.concat(arr)二:删除数组中任意位置数组
1.通过:arr.splice(index,1)来删除,这句执行完后返回值是被删除的数据,但是会改变原数组的数据(已经删除了目标值的数组),只需要通过this.setData()方法重新渲染即可
2.如何获取index? 通过data-[name]传值【见上述】
九 设计规范
基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。
设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。
1.友好礼貌
——-重点突出
——-流程明确
2.清晰明确
——-导航明确,来去自如
——-减少等待,反馈及时
——-异常可控,右路可退
3.便捷优雅
——-减少输入
——-避免误操作
——-利用接口提升性能
4.统一稳定
5.视觉规范
——-字体:大小、颜色
——-列表:间距
——-表单:提示与输入框的比例,对齐方式
——-按钮:可用、不可用,不同状态透明的不同
——-图标:完成、提醒、警告(视情况而定)
十 问题与不足
微信小程序 很大程度上简化了开发,但是微信为了维护自己产品生态,主张统一和谐而做了很多的限制,新设计的应用基本上无法照搬之前的模型,设计时要考虑“配色和谐统一”、“最多打开5个页面”、“底部导航2-5个”、无法更改顶部导航栏的功能菜单等等约束。否则可能会出现,页面链接失效,因为当前打开页面已经5个了,因此在设计页面跳转时部分页面不得不使用重定向方式(即关闭当前的页面,再打开新的页面)这样无法避免的产生程序后退不能回到真正的上一级页面。诸多小问题需要慢慢发现然后解决或者是顺应版本。