微信项目结构
项目开发的目录结构，微信已经为开发者规范好了，结构清楚明了，很容易分辨和阅读。
- 小程序的主体部分（程序的入口）
由3个文件组成，必须放在项目的根目录，如下：
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑(生命周期函数..) |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表 |
- 一个小程序页面由四个文件组成，分别是：
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑(页面周期函数..) |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表 |
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
页面赋值和刷新
它的页面赋值、刷新跟RN差不多（数据推动），都是通过在js逻辑层通过一个函数去实现的。看代码....
页面事件处理
路由
- 怎么传值给下一个页面
1.通过跳转url拼接?title=xxx&msg=xxx
onLoad: function (options) {
console.log(options.title);
}
2.跳转页面通过获取page实例取值
onLoad: function (options) {
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
console.log(prevPage.data.xxx);
}
3.把当前页面数据放入本地缓存（ wx.setStorage（wx.setStorageSync），下一个页面再从缓存中取出（wx.getStorage（wx.getStorageSync））同时退出登录时要清除缓存（wx.clearStorage（wx.clearStorageSync））。
- 怎么传值修改上一个页面或者堆栈中的页面值
1.跳转页面前通过获取page实例修改
xxxFunction: function () {
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.data.xxx;//只修改、添加值；
prevPage.setData({
xxx:xxxxx
});//同时刷新页面；
wx.wx.navigateBack();//返回
}
2.也可以把当前页面数据放入本地缓存，上一个页面再从缓存中取出。
其他的像网络API、存储API 等等可以去官方查看对应文档，有详细的介绍。官方地址：https://developers.weixin.qq.com/miniprogram/dev/api/
下面讲讲小程序中的一些特殊设计点
为了让开发者开发的项目更容易扩展和迭代、解耦、复用。微信小程序框架提供了很多能力，简单介绍几个。
模板功能
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
其实有点像IOS中的宏定义功能，一个占位符，编译打包后占位符位置替换成具体UI标签
自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
WXS文件
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意
- wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
小程序其它功能和能力大家可以去官方查看
https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18110719
简单说说开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/different.html
网友评论