最最重要的还是得从阅读开发文档入手
1. 目录结构
- 微信小程序文件结构
wxml[结构] + wxss[样式] + js[逻辑] + json[配置]
2. 全局配置
- 全局配置 -- 根目录下的app.json
- 对微信小程序做全局配置
- 决定页面文件的路径、窗口表现、设置网络超时等
-
页面配置
-
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
-
页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
-
3. 小程序框架
- 001 在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面
- 002 注册小程序
- 在 app.js 中调用 App()注册小程序实例
- 绑定生命周期回调函数、错误监听和页面不存在监听函数等。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// app.jsApp({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, onError (msg) { console.log(msg) }, globalData: \'I am global data\',// globalData: {// data1: \'data1Value\'// }}) |
-
- 整个小程序只有一个 App 实例，是全部页面共享的。
- 开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
|
1
2
|
const appInstance = getApp()console.log(appInstance.globalData) // I am global data |
- 003 注册页面
-
- 小程序页面在对应的 js 文件中使用Page()进行注册
- 指定页面的初始数据、生命周期回调、事件处理函数等
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
//index.jsPage({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() { // 页面首次渲染完毕时执行 }, onHide: function() { // 页面从前台变为后台时执行 }, onUnload: function() { // 页面销毁时执行 }, onPullDownRefresh: function() { // 触发下拉刷新时执行 }, onReachBottom: function() { // 页面触底时执行 }, onShareAppMessage: function () { // 页面被用户分享时执行 }, onPageScroll: function() { // 页面滚动时执行 }, onResize: function() { // 页面尺寸变化时执行 }, onTabItemTap(item) { // tab 点击时执行 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 事件响应函数 viewTap: function() { this.setData({ text: \'Set some data for updating view.\' }, function() { // this is setData callback }) }, // 自由数据 customData: { hi: \'MINA\' }}) |
- 004 使用Component构造器构造页面
-
- Component 构造器的主要区别是：方法需要放在 methods: { } 里面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Component({ data: { text: "This is page data." }, methods: { onLoad: function(options) { // 页面创建时执行 }, onPullDownRefresh: function() { // 下拉刷新时执行 }, // 事件响应函数 viewTap: function() { // ... } }}) |
-
- 可以使用 behaviors 来提取所有页面中公用的代码段
|
1
2
3
4
5
6
7
8
9
10
11
|
// page-common-behavior.jsmodule.exports = Behavior({ attached: function() { // 页面创建时执行 console.info(\'Page loaded!\') }, detached: function() { // 页面销毁时执行 console.info(\'Page unloaded!\') }}) |
|
1
2
3
4
5
6
7
|
// 页面 Avar pageCommonBehavior = require(\'./page-common-behavior\')Component({ behaviors: [pageCommonBehavior], data: { /* ... */ }, methods: { /* ... */ },}) |
|
1
2
3
4
5
6
7
|
// 页面 Bvar pageCommonBehavior = require(\'./page-common-behavior\')Component({ behaviors: [pageCommonBehavior], data: { /* ... */ }, methods: { /* ... */ },}) |
- 005 自定义组件
-
- 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成
-
- 0051 首先需要在 json文件中进行自定义组件声明
- （将 component 字段设为 true 可将这一组文件设为自定义组件）
- 0051 首先需要在 json文件中进行自定义组件声明
|
1
2
3
4
|
// .json{ "component": true} |
-
- 0052在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!-- 这是自定义组件的内部WXML结构 --><view class="inner"> {{innerText}}</view><slot></slot>/* * 这里的样式只应用于这个自定义组件 * 注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。 */.inner { color: red;} |
-
- 0053 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
- （组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的）
- 0053 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// .jsComponent({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { type: String, value: \'default value\', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function(){} }}) |
-
-
0054 使用自定义组件
-
-
-
- 00541 在页面的 json 文件中进行引用声明
-
|
1
2
3
4
5
|
{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" }} |
-
-
- 00542 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件
-
-
-
-
- 节点名即自定义组件的标签名，节点属性即传递给组件的属性值
-
-
|
1
2
3
4
5
|
<view> <!-- 以下是对一个自定义组件的引用 --> <component-tag-name inner-text="Some text"></component-tag-name></view> |
-
- 注意
-
-
- 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
- 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
-
- 4 页面路由 --- 在小程序中所有页面的路由全部由框架进行管理， 框架以栈的形式维护了当前的所有页面
-
注意点
-
navigateTo, redirectTo 只能打开非 tabBar 页面。
-
switchTab 只能打开 tabBar 页面。
-
reLaunch 可以打开任意页面。
-
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
-
调用页面路由带的参数可以在目标页面的onLoad中获取
-
- 5 模块化
-
- 001将公共代码抽离到js文件，通过module.exports暴露接口
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// common.jsfunction sayHello(name) { console.log(`Hello ${name} !`)}function sayGoodbye(name) { console.log(`Goodbye ${name} !`)} module.exports= {sayHello: sayHellosayGoodbye: sayGoodbye} |
-
- 002 在需要使用这些模块的文件中，使用 require 将公共代码引入
|
1
2
3
4
5
6
7
8
9
|
var common = require(\'common.js\')Page({ helloMINA: function() { common.sayHello(\'MINA\') }, goodbyeMINA: function() { common.sayGoodbye(\'MINA\') }}) |
- tip
- 绑定事件
- bindtap
- catchtap -- 不冒泡
- 如果一个view有多个bindtap，只走最后一个
- 如果一个view同时有bindtap和catchtap，只走catchtap
- 全局方法 --> 写在utils>request.js
- 在根目录下的app.js 的func对象中声明
- 在页面中，通过getApp().func.xxx 调用
- 双向绑定
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<view class="list"><text class="list_left">身份证号：</text> <input name="cardId" class="list_right" value="{{infodata.idCard}}" data-type="idCard" bindinput="inputChange"/></view>inputChange(e){ var content = e.detail.value var type = e.currentTarget.dataset.type switch (type) { case "idCard": this.setData({ ["infodata.idCard"]: content }) break; case "userName": this.setData({ ["infodata.username"]: content }) break; }} |
请发表评论