前言
最近发布了一批搞笑的文字类小程序; 故记录一下有关小程序的一些开发心得. 开篇就拿样例工程入手.
此篇主要是介绍一下小程序样例工程的目录结构, 以及小程序的文件构成. 另外还对于自己认为 callback 获取用户信息的疑点做出了一些说明.
样例工程
小程序样例工程 (QuickStart) 目录结构
- app.js
- app.json
- app.wxss
- jsconfig.json
- project.config.json
- .vscode
- settings.json
- pages
- index
- index.js
- index.wxml
- index.wxss
- logs
- logs.js
- logs.json
- logs.wxml
- logs.wxss
- typings
- wx.d.ts
- utils
- util.js
注意: 因我使用了 vscode 作为小程序的开发工具, 故会自动增加. vscode 以及 typings(vscode 小程序开发插件自动增加)目录
官网中的 API 文档有提到不同文件的含义
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
JSON 文件
在项目中有以下几个 JSON 文件 app.json,project.config.json,pages/logs/logs.json
app.json
app.json 是对当前小程序的全局配置, 包括了小程序的所有页面路径, 界面表现, 网络超时时间, 底部 tab 等
pages 用于描述当前小程序所有页面路径(让微信客户端知道当前你的小程序页面定义在哪个目录)
window 定义小程序所有页面的顶部背景颜色.
工具配置 project.config.json
project.config.json 是指个性化的配置信息; 如配置版本库, 该小程序是发布到哪个 appId, 以及工程名等...
页面配置 page.json
为每个 page 定义顶部颜色, 是否允许下拉刷新等
该文件在 page 中可有可无, 如果不存在, 则默认为 app.json 的配置; 存在则以该文件的配置为准.
WXML 模板
WXML(WeiXin Markup Language)是框架设计的一套标签语言, 结合基础组件, 事件系统, 可以构建出页面的结构. 简单来说: WXML 充当类似 html 的角色.
而且小程序是基于 MVVM 的开发模式, 对于已经熟悉 vue,React 等前端开发框架的话, 会很容易上手. 另外有个 WXML 的一些数据绑定, 事件等可参考官网 API:WXML https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
- //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
- }
- })
- if (this.userInfoReadyCallback) {
- this.userInfoReadyCallback(res)
- }
- const app = getApp()
- ......
- // 所以此处加入 callback 以防止这种情况
- app.userInfoReadyCallback = res => {
- this.setData({
- userInfo: res.userInfo,
- hasUserInfo: true
- })
- }
- ......
- //app.js
- if (this.userInfoReadyCallback) { // 是否定义了 userInfoReadyCallback
- this.userInfoReadyCallback(res) // 定义后就调用该函数, 并且传入 res 的参数信息
- }
- //index.js
- // 此处定义了 function userInfoReadyCallback(res), 注意 app.userInfoReadyCallback; 也就是在 app.js 中定义了 userInfoReadyCallback; 故在执行获取用户信息的时候, 会将用户信息设置到 index.wxml 页面的 data 中
- app.userInfoReadyCallback = res => {
- this.setData({
- userInfo: res.userInfo,
- hasUserInfo: true
- })
- }
来源: http://www.jianshu.com/p/2286202c7b94