小程序
WXML
- 引入wxs
- 引入骨架图
- 指令、属性、事件
- 双向绑定
<!-- 1-引入wxs -->
<wxs module="tool" src="../utils/tool.wxs"></wxs>
<!-- 2-引入骨架图 -->
<import src="index.skeleton.wxml"></import>
<template is="skeleton" wx:if="{{ pageLoading }}"></template>
<!-- 3-指令、属性、事件 -->
<view
wx:if="{{ show }}"
wx:for="{{ list }}"
wx:key="id"
class="view-box"
data-id="{{ item.id }}"
mark:Mymark="{{ item }}"
bind:tap="onViewClick"
>{{ item }} - {{ tool.format(item.date) }}</view>
<!-- 4-双向绑定 -->
<input model:value="{{value}}" />
！！！不支持双向绑定对象的属性！！！
<input model:value="{{ obj.value }}" />
其他细节：
// 1-如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）
<view bindtap="{{ handlerName }}">
Click here!
</view>
// 2-阻止冒泡 catchtap
WXSS
- 导入样式文件使用
@import - 单位使用 rpx（调试继续选择 iPone 6/7/8，屏幕宽度为 750rpx）
- style 接收动态的样式
@import "index.skeleton.wxss";
@import "/style/commom.wxss";
<!-- style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 -->
<view style="color: {{ color }}"></view>
JS
- 获取全局变量
// app.js
App({
globalData: 'globalData'
})
// a.js
const app = getApp()
console.log(app.globalData) // globalData
其他细节：
// 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text':'changed data'
})
生命周期、页面事件
onLoad: function(options) {
// 页面创建
},
onShow: function() {
// 页面出现在前台
},
onReady: function() {
// 页面首次渲染完毕
},
onHide: function() {
// 页面从前台变为后台
},
onUnload: function() {
// 页面销毁
},
onPullDownRefresh: function() {
// 触发下拉刷新
},
onReachBottom: function() {
// 页面触底
},
onShareAppMessage: function () {
// 页面被用户分享
},
onPageScroll: function(scroll) {
// 页面滚动
},
onResize: function() {
// 页面尺寸变化
},
onTabItemTap(item) {
// tab 点击
}
组件相关
父子通信
// 1-子组件
this.triggerEvent('clickTitle', { name: "Matt", age: 18 })
// 1-父组件
<son bind:clickTitle="onClickTitle"></son>
// 1-父组件事件
onClickTitle(e) {
console.log('父组件接收到事件', e.detail)
// 2-获取子组件
const rightsItem = this.selectComponent('#rights-item')
}
仅在组件中生效
Component({
options: {
// 1-纯数据字段正则，既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。
pureDataPattern: /^self_/
},
properties: {},
data: {
self_msg: 'hello'
},
// 2-数据监听
observers: {
count(newVal, oldVal) {
console.log(val)
}
},
lifetimes: {
// 不能使用setData
created() {},
// 组件实例进入页面节点树
attached() {},
// 组件实例被从页面节点树移除
detached() {},
},
// 组件所在页面的生命周期函数
pageLifetimes: {
show: function () {},
hide: function () {},
resize: function () {},
},
// 组件的方法
methods: {}
}
常用API
界面
交互
// 1-消息提示
wx.showToast({
title: '内容',
icon: 'success | error | loading | none',
image: '自定义图片本地路径',
duration: 1500,
mask: false
})
// 2-对话框
wx.showModal({
title: '标题',
content: '内容',
showCancel: true,
cancelText: '取消文案',
cancelColor: '#000',
confirmText: '确认文案',
confirmColor: '#576B95',
success(res) {
// { confirm: true, cancel: false }
}
})
// 3-加载提示，相当于 toast-loading，需 wx.hideLoading() 关闭
wx.showLoading({})
// 4-操作菜单
wx.showActionSheet({
itemList: ['选项一', '选项二', '最多六'],
itemColor: '#000',
success(res) {
// { tapIndex: 0 }
}
})
导航栏、Tabbar
// 1-导航条加载
wx.showNavigationBarLoading()
wx.hideNavigationBarLoading()
// 2-设置当前页面的标题
wx.setNavigationBarTitle({
title: '导航栏标题'
})
// 1-tabbar 红点
wx.showTabBarRedDot({
index: 0
})
wx.hideTabBarRedDot({})
// 2-tabbar 右上角文案
wx.setTabBarBadge({
index: 0,
text: '4个字符'
})
wx.removeTabBarBadge({
index: 0
})
// 获取胶囊位置
const res = wx.getMenuButtonBoundingClientRect()
{
width: 87,
height: 32,
top: 24,
right: 368,
bottom: 56,
left: 281,
}
路由
// 1-跳转页面（非 tab）
wx.navigateTo({
url: `/pages/rights-detail/index?id=${id}`,
})
// 2-关闭当前页，再跳转
wx.redirectTo({
url: 'test?id=1'
})
// 3-返回
wx.navigateBack({
delta: 2 // 返回的页面数
})
// 4-跳转到 tabBar 页面，并关闭所有非 tabBar 页面
// url 需要以 '/' 开头
wx.switchTab({
url: ''
})
// 5-关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
url: 'test?id=1'
})
网络请求
wx.request({
method: ''
url: '',
data: {},
header: {},
success(res) {},
fail(res) {},
complete() {}
})
本地缓存
// 1-同步
wx.setStorageSync('key', 'value')
const res = wx.getStorageInfoSync('key')
wx.removeStorageSync('key')
wx.clearStorageSync()
// 2-异步
wx.setStorage({
key: "key",
data: "value",
success() {}
})
// getStorage、removeStorage、clearStorage
配置相关
页面配置
{
"usingComponents": {},
"navigationBarBackgroundColor": "导航栏背景颜色，默认 #000000 （HexColor）",
"navigationBarTextStyle": "导航栏标题颜色，默认 white （black | white）",
"navigationBarTitleText": "导航栏标题（string）",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
}
全局配置
{
"entryPagePath": "默认启动页",
"pages": [
"pages/market/index",
"pages/message/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "标题",
"navigationBarTextStyle": "black",
"backgroundColor": "#eeeeee"
},
"usingComponents": {
},
"tabBar": {
"custom": false,
"color": "#000000",
"selectedColor": "#0000ff",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/market/index",
"text": "权益",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/message/index",
"text": "消息",
"iconPath": "",
"selectedIconPath": ""
}
]
}
}
