逻辑层 (js)
生命周期
app.js
- onLounch(只调用一次) -> onShow -> 依次注册好各个页面组件
page.js
- onLoad(首页加载) -> onShow -> onReady
setData更改data值
- 用例:
//异步操作
this.setData({
// 数组或者对象的属性, 必须字符串才生效, 要不然直接报错
'object.text': '新值',
'array[0].text': '新值'
}, () => [
// 更新完数据的回调
])
导航
navigateTo 只能导航到本页面的子组件内
例子的完整路径:
pages/home/tip/tip声明式:
<navigator open-type="navigateTo" url='tip/tip'> 跳转页面 </navigator>编程式:
wx.navigateTo({ url: 'tip/tip'})类似的有:
页面重定向:
wx.redirectTo和<navigator open-type="redirectTo"/>页面会销毁页面返回:
wx.navigateBack和<navigator open-type="navigateBack">页面会销毁tab栏切换
wx.switchTab和<navigator open-type="switchTab"/>重启本页面
wx.reLaunch和<navigator open-type="reLaunch"/>页面会销毁Tip
navigateTo, redirectTo 只能打开非 tabBar 页面
switchTab 只能打开 tabBar 页面
reLaunch 可以打开任意页面
模块化
getApp()获取全局的数据, 全局的数据可以在APP()中设置commonjs规范
导出: module.exports.sayHi = sayHi / exports.sayHi = sayHi
导入: var sayHi = require('sayHi')
API
- 事件监听 API:
wx.onSocketOpen(Fn)回调函数, 返回值为回调函数的参数
wx.onSocketOpen(function (res) {
console.log(res.direction)
})
同步 API:
wx.setStorageSync返回值是return出来, 有错会抛出异步 API:
wx.login接受参数
wx.login({
success(res) {
console.log(res.code)
},
fail() {
}
})
视图层
WXML
<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
数据绑定: <view> {{message}} </view>
Mustache 语法
组件属性(需要在双引号之内), boolean 也需要
"{{true}}"花括号和引号之间如果有空格，将最终被解析成为字符串
拓展运算符
<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}
列表渲染: <view wx:for="{{array}}" wx:for-index="idx" wx:key="idx"> {{item}} </view>
默认直接用index 和 item
别名: wx:for-index='idx' 就是把index改成了idx
wx:for="array" 遍历一个字符串, 解析出来 a, r, r, a, y
花括号和引号之间如果有空格，将最终被解析成为字符串
wx:for="{{array}} "=>wx:for="{{array + ''}}"key值的
*this代表item本身当key值
条件渲染: <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
- wx:if 和 wx:hidden 就相当于 v-if 和 v-show
模板
模板定义代码片段, 然后需要的地方引用, name属性代表模板
声明:
<template name="msgItem"><view>{{item}}</view></view></template>引用: 使用is关键字data为数据:
<template is="msgItem" data="{{...item}}"/>
事件: <view bindtap="add"> {{count}} </view>
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡(catch事件单单只触发本身)
捕获
-
事件对象:
dataset: 里面可以以data-开头，多个单词由连字符-链接，不能有大写, 传递数据
引用
WXML 提供两种文件引用方式import和include
import
<import src="a.wxml"/>import的作用域: 只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template
include
include 可以将目标文件除了
<template/><wxs/>外的整个代码引入，相当于是拷贝到 include 位置
WXSS
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应, 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素
iphone6 上才是二倍的换算
样式导入: @import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径
适配思路: rpx和px的抉择: font-size(px)
全局样式: 在app.wxss中定义, 组件有部分样式是不能继承全局样式: 比如font, color可以被继承, 其他不能9
`page{font-size: 24rpx}`, 因为小程序自动在每一页加page为最外层标签
WXS
- 例子
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
概念: 编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内
wxml中引用: 引用.wxs的文件的相对路径
<wxs src="./../tools.wxs" module="tools" />, 使用<view>{{tools.msg}}</view>wxs中引用: 使用 require 函数
组件
内置组件
自定义组件
声明自定义组件
自定义组件放在components文件夹下 -> 创建的时候是创建的components而不是page -> 区别就是app.json中是找不到路径的 -> 否则引用组件时候是找不到的
wxss:
在组件wxss中不应使用ID选择器、属性选择器和标签名选择器
js:
Component构造器: 相当于页面的Page({})
properties => 相当于Vue的props
wxml:
json:
"component": true// 表示是组件
使用自定义组件的组件
- 在json文件中声明
{
"usingComponents": {
"你自定义的组件名": "组件的位置, 可以绝对路径也可以相对路径",
"component-tag-name": "path/to/the/custom/component"
}
}
- 使用: 直接使用json中命名的名称
组件传值
总结: 项目并未完全完成, 留待之后补充~
