一、目录结构：
1、项目根目录：app.js(小程序逻辑)、app.json(小程序公共设置)、app.wxss(小程序公共样式表) 2、文件类型：js(页面逻辑)、wxml(页面结构)、wxss(页面样式)、json(页面配置)
二、配置：
1、全局配置 【1】app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。配置项列表如下所示： { "pages": [ //设置页面路径 "pages/index/index", "pages/logs/index" ], "window": { //设置默认页面的窗口表现 "navigationBarTitleText": "Demo" }, "tabBar": { //设置底部Tab的表现 "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { //设置网络超时时间 "request": 10000, "downloadFile": 10000 }, "debug": true //设置是否开启debug模式 }
【2】pages是接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。配置项列表如下所示： { "pages":[ "pages/index/index", "pages/logs/logs" ] }
【3】window用于设置小程序的状态栏、导航条、标题、窗口背景色。配置项列表如下所示： { "window":{ "navigationBarBackgroundColor": "#ffffff", //HexColor（十六进制颜色值），如"#ff00ff" "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "navigationStyle": "default", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "backgroundColorTop": "#ffffff", "backgroundColorBottom": "#ffffff", "enablePullDownRefresh": false, "onReachBottomDistance": 50 } }
【4】如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。配置项列表如下所示：
{
"tabBar": {
"list": [{ //tab的列表，最多5个，最少2个
"pagePath": "pages/index/index",
"text": "首页",
"iconPath”: "pages/index/index”,
"selectedIconPath": "pages/index/index"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}],
"color": "#ffffff",
"selectedColor": "#ffffff",
"backgroundColor": "#eeeeee",
"borderStyle": "black",
"position”: "bottom"
}
复制代码}
【5】各类网络请求的超时时间。单位均为毫秒。配置项列表如下所示：
{
"networkTimeout": {
"request": 10000,
"connecSocket": 10,
“uploadFile": 10000,
"downloadFile": 10000
}
}
【6】debug可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出。其信息有page的注册，页面路由，数据更新，事件触发等。
【7】启用插件功能页时，插件所有者小程序需要设置其 functionalPages 为 true。
【8】启用分包加载时，声明项目分包结构。
【9】使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录。
2、页面配置 【1】每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。配置项列表如下所示： { "navigationBarBackgroundColor": "#ffffff", //HexColor（十六进制颜色值），如"#ff00ff" "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false, //是否开启下拉刷新 “disableScroll”: false, //是否可以页面滚动 "onReachBottomDistance": 50 //距页面底部距离 }
三、逻辑层：
1、简介 小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。
2、注册程序 使用App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。 示例代码如下： App({ onLaunch: function(options) { //监听小程序初始化 // Do something initial when launch. }, onShow: function(options) { //监听小程序显示 // Do something when show. }, onHide: function() { //监听小程序隐藏 // Do something when hide. }, onError: function(msg) { //错误监听函数 console.log(msg) }, onPageNotFound: function(res) { //页面不存在监听函数 wx.redirectTo({ url: 'pages/...' }) // 如果是 tabbar 页面，请使用 wx.switchTab }, globalData: 'I am global data' }) 【2】小程序生命周期 onLaunch —> onShow —> onHide —> onError —> onPageNotFound
3、场景值 可以在 App 的 onlaunch 和 onshow 中获取上述场景值，部分场景值下还可以获取来源应用、公众号或小程序的appId。
4、注册页面 【1】Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。 示例代码如下： Page({ data: { //页面的初始化数据 text: "This is page data." }, onLoad: function(options) { //监听页面加载 // Do some initialize when page load. }, onShow: function() { //监听页面显示 // Do something when page show. }, onReady: function() { //监听页面渲染完成 // Do something when page ready. }, onHide: function() { //监听页面隐藏 // Do something when page hide. }, onUnload: function() { //监听页面卸载 // Do something when page close. }, onPullDownRefresh: function() { //监听页面下拉刷新动作 // Do something when pull down. }, onReachBottom: function() { //监听页面上拉触底事件 // Do something when page reach bottom. }, onShareAppMessage: function () { //监听用户点击右上角转发分享 // return custom share data when user share. }, onPageScroll: function() { //监听页面滚动触发事件 // Do something when page scroll }, onTabItemTap(item) { //监听用户点击tap时触发 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }, function() { // this is setData callback }) }, customData: { hi: 'MINA' } })
【2】初始数据 data 是页面第一次渲染使用的初始数据。页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。渲染层可以通过 WXML 对数据进行绑定。 示例代码如下： Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } })
【3】生命周期回调函数 onLoad：页面加载时触发 onShow：页面显示/切入前台是触发 onReady：页面初次渲染完成时触发 onHide：页面隐藏/切入后台时触发 onUnload：页面卸载时触发
【4】页面事件处理函数 onPullDownRefresh：监听用户下拉刷新事件 onReachButton：监听用户上拉触底事件 onPageScroll：监听用户滑动页面事件 onShareAppmessage：监听用户点击页面内转发按钮 onTabItemTap：点击tab时触发
【5】组件事件处理函数 Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。
【6】route Page.prototype.route：到当前页面的路径，类型为String。
【7】setData Page.prototype.setData(Object data, Function callback) setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
【8】页面生命周期 onLoad —> onShow —> onReady —> onHide —> onUnload
5、路由 【1】页面路由 在小程序所有页面的路由全部由框架进行管理。
【2】页面栈 框架以栈的形式维护了当前的所有页面。 路由方式：初始化 —> 打开新页面 —> 页面重定向 —> 页面返回 —> Tab切换 —> 重加载
【3】getCurrentPages() getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 注意：不要尝试修改页面栈，会导致路由以及页面状态错误。 路由方式：初始化 —> 打开新页面 —> 页面重定向 —> 页面返回 —> Tab切换 —> 重启动
6、模块化 【1】文件作用域 在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。 【2】模块化 可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。 注意： 《A》exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports来暴露模块接口，除非你已经清晰知道这两者的关系。 《B》小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。
7、API 小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
四、视图层：
1、视图层View 框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
2、WXML 【1】简介 WeiXin Markup Language 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
【2】数据绑定(WXML 中的动态数据均来自对应 Page 的 data) 《1》简单绑定： 数据绑定使用 Mustache 语法（双大括号）将变量包起来可以作用于：内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内) 《2》运算： 三元运算、算数运算、逻辑判断、字符串运算、数据路径运算 《3》组合： 也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
【3】列表渲染 《1》wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。 《2》block wx:for 类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。 《3》wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目
【4】条件渲染 《1》wx:if 在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。 《2》block wx:if 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
【5】模版 《1》WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 《2》定义模板 使用 name 属性，作为模板的名字。然后在内定义代码片段。 《3》使用模板 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。 《4》模板的作用域 模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
