资讯专栏INFORMATION COLUMN

勘探-微信小程序

blastz / 1623人阅读

摘要:模块化推荐文件具有多带带作用域可以抽离公共代码或者对外暴露接口不支持绝对路径以及路由在小程序中所有页面的路由全部由框架进行管理。

mini-program

勘探-微信小程序

注册小程序账号

前往官网注册--流程简单,不赘述.

在网站的“设置”-“开发者设置”中,得到AppId

下载开发者工具

mac

window 32

windows 64

通过开发者工具创建小程序

文件结构

小程序有全局的配置、样式、逻辑也有每个页面自己的配置、样式、逻辑文件

app.json: 全局配置--(小程序公共设置)

app.js: 全局配置--(小程序逻辑)

app.wxss: 全局配置--(小程序公共样式)

pages: 页面数组--(小程序可多带带有自己的配置、样式、逻辑文件,还有一个页面结构文件)

配置部分注意项~

配置部分相对简单,So 只列出如下注意点,顺带附上个人配置:

为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相同的路径与文件名。

每增加一个页面,必须在全局app.json文件pages参数下增加对应路径配置!

如果有菜单项,强制要求控制在2-5个!

如果配置菜单必须把小程序初始页面配成菜单list其中一个,否则无法显示菜单!!

逻辑层
函数 出现位置 可能值 说明
App() app.js 1. 小程序生命周期函数
2. 自定义函数
3. 数据
1.其中自定义函数和数据为全局的
2.本文件内通过this调用自定义函数和数据,其他文件需要getApp()或者实例后调用
Page() pages下的页面内 1. 初始数据
2.页面生命周期函数
3.自定义函数
4.数据
1. Page.prototype.route可以获取当前路由路径
2.Page.prototype.setData()可更改数据,并相应到视图层,
直接修改this.data不会更新到页面,且单次设置数据不能超过1024kb。
模块化 1.module.exports(推荐) 2.exports 1. 文件具有多带带作用域
2.可以抽离公共代码module.exports 或者 exports对外暴露接口
3.不支持绝对路径以及node_modules
路由 在小程序中所有页面的路由全部由框架进行管理。
场景值 自行查看文档
API 自行查看文档
有兴趣的话可以自行去了解一下 【前台、后台定义】以及【销毁小程序的时机】

老规矩,剩下的列出需要注意的点:

App() 必须在 app.js 中注册,且不能注册多个。

不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。>

通过 getApp() 获取实例之后,不要私自调用生命周期函数。

WXML
语法 说明 注意 eg
{{}} 1. 用于data对象下存在的字段 出现的位置
2. 支持简单计算及组合
1. 关键字(需要在双引号之内)
2. 花括号和引号之间如果有空格,将最终被解析成为字符串
1. ,不加{{}}会当成字符串false而判定为true
2. {{"hello" + name}}
wx:for 循环数组 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
block wx:for 渲染一个包含多节点的结构块。
wx:key 指定列表中项目的唯一的标识符。
wx:if
wx:elif
wx:else
wx:if vs hidden
1. 条件渲染
2. wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗
1. True
block wx:if 方便整体控制
template 1. 定义代码片段
2. name属性定义模板名字
3. is属性声明需要的使用的模板并需要传入data
4. 模板有自己的作用域,只能使用data传入数据
import和include 1. import引用目前文件定义的模板
2. include可以将目标文件除了