微信小程序 学习日志

加分技能 阅读量

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

第一个小程序

准备

申请账号

(国庆期间)小程序注册帐号功能维护…

安装开发者工具

小程序代码构成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
pages                                      
├─index                 首页文件夹  
│  ├─index.js           JS 脚本逻辑文件       
│  ├─index.json         JSON 配置文件
│  ├─index.wxml         WXML 模板文件  
│  ├─index.wxss         WXSS 样式文件  
├─logs                  日志文件夹 
│  ├─logs.js                   
│  ├─logs.json            
│  ├─logs.wxml            
│  ├─logs.wxss            
├─utils                 
│  ├─util.js            
├─app.js                小程序逻辑
├─app.json              小程序公共配置
├─app.wxss              小程序公共样式表
├─project.config.json
└─sitemap.json

JSON 配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

全局配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

工具配置 project.config.json

开发者工具个性化配置

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
{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true,
		"autoAudits": false,
		"coverView": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.4",
	"appid": "wx91ca1fd41ee5832c",
	"projectname": "miniprogram-1",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

sitemap配置 sitemap.json

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

  • 所有页面都会被微信索引（默认情况）
1
2
3
4
5
6
{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}
  • 配置 path/to/page 页面不被索引，其余页面允许被索引
1
2
3
4
5
6
{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}
  • 配置 path/to/page 页面被索引，其余页面不被索引
1
2
3
4
5
6
7
8
9
{
  "rules":[{
    "action": "allow",
    "page": "path/to/page"
  }, {
    "action": "disallow",
    "page": "*"
  }]
}

更多参考: 配置小程序 - sitemap 配置

WXML 模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

WXSS 样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

1
2
3
4
5
6
7
8
9
10
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

    1. 新增了尺寸单位. WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可.
    1. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效
    1. 此外 WXSS 仅支持部分 CSS 选择器

目前支持的选择器

选择器 样例 样例描述
.class .intro 选择所有拥有 class=”intro” 的组件
#id #firstname 选择拥有 id=”firstname” 的组件
element view 选择所有 view 组件
element,element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

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
//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

框架相关

生命周期

页面Page的生命周期

注册页面

使用 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
Page({
    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'
    }
});

使用 Component 构造器构造页面

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
    data: {
        text: "This is page data."
    },
    methods: {
        onLoad: function(options) {
            // 页面创建时执行
        },
        onPullDownRefresh: function() {
            // 下拉刷新时执行
        },
        // 事件响应函数
        viewTap: function() {
            // ...
        }
    }
});

自定义组件

组件生命周期

生命周期 参数 描述
created 无 在组件实例刚刚被创建时执行
attached 无 在组件实例进入页面节点树时执行
ready 无 在组件在视图层布局完成后执行
moved 无 在组件实例被移动到节点树另一个位置时执行
detached 无 在组件实例被从页面节点树移除时执行
error Object Error 每当组件方法抛出错误时执行

参考

Powered by Hexo and Hexo-theme-hiker

Copyright © 2017 - 2023 Keep It Simple And Stupid All Rights Reserved.

访客数 : | 访问量 :