要开发小程序首先要明白下面几个问题
- 我们如何创建小程序，如何对项目的目录结构分析？
- 一个小程序页面的生命周期是什么？
- 如何增加页面？
- 如何设置导航栏的属性？
- 小程序是如何将视图层和逻辑层进行绑定的？
小程序的文件结构
一个小程序首先有四个应用入口文件：
- app.js：设置一些项目的全局变量,小程序逻辑，初始化APP
- app.json：小程序的全局配置，比如导航、窗口、页面http请求跳转等。全局配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
- app.wxss：项目全局样式
- project.config.json：项目配置文件
一个页面主要是包含以下四个文件，这四个文件必须是相同的名字和路径，最好以页面所在的文件夹名字为标准：
- xxx.wxml：页面的结构（必须）
- xxx.wxss：页面的样式
- xxx.json：页面的配置文件
- xxx.js：页面的脚本文件（必须）
页面可以嵌套页面，但是建议不要超过5个层级。
app.json文件
"pages": [ //设置页面的路径
"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
"pages/logs/logs"
],
"window": { //设置默认窗口的表现形式
"navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
"navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
"disableScroll": true, // 设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
},
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
"list": [{ //设置tab的属性，最少2个，最多5个
"pagePath": "pages/index/index", //点击底部 tab 跳转的路径
"text": "首页", //tab 按钮上的文字
"iconPath": "../img/a.png", //tab图片的路径
"selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}],
"color": "red", //tab 的字体颜色
"selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //边框的颜色 black/white
"position": "bottom" //tab处于窗口的位置 top/bottom
},
"networkTimeout": { //默认都是 60000 秒一分钟
"request": 10000, //请求网络超时时间 10000 秒
"downloadFile": 10000， //链接服务器超时时间 10000 秒
"uploadFile": "10000", //上传图片 10000 秒
"downloadFile": "10000" //下载图片超时时间 10000 秒
},
"debug": true //项目上线后，建议关闭此项，或者不写此项
可以看到共有五个部分可以配置，分别是pages, window, tarBar, networkTimeout和debug
pages：定义的是这个小程序由哪些页面组成。在以后需要新增或者减少页面时，都需要在这里进行设置，有几个页面pages数组就有几项。pages是一个数组，而数组的第一项就是小程序的初始页面.
window: 定义的是窗口的配置信息。
属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white
navigationBarTitleTextStringa导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新
tarBar: 用来定义 tabBar 的表现
tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
我们可以在项目目录下添加一个images文件，用来存放我们的图片文件。
注意：目前小程序只支持网络图片或者base64图片，使用本地图片需要将图片转为base64代码
networkTimeout: 用来设置各种网络请求的超时时间。
属性类型必填说明
requestNumber否wx.request的超时时间，单位毫秒
connectSocketNumber否wx.connectSocket的超时时间，单位毫秒
uploadFileNumber否wx.uploadFile的超时时间，单位毫秒
downloadFileNumber否wx.downloadFile的超时时间，单位毫秒
小程序的生命周期
（1）App()生命周期
-
用户首次打开小程序，触发 onLaunch（全局只触发一次）。
-
小程序初始化完成后，触发onShow方法，监听小程序显示。
-
小程序从前台进入后台，触发 onHide方法。
-
小程序从后台进入前台显示，触发 onShow方法。
-
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
-
小程序出错，触发onError
-
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台
//app.js App({ onLaunch: function() { //小程序初始化(全局只触发一次) }, onShow: function() { //小程序显示 }, onHide: function() { //小程序隐藏 }, onError: function(msg) { //小程序错误 }, }) //其他 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
（2）Page页面生命周期（每个页面也有自己的生命周期）
-
小程序注册完成后，加载页面，触发onLoad方法。
-
页面载入后触发onShow方法，显示页面。
-
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
-
当小程序后台运行或跳转到其他页面时，触发onHide方法。
-
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
-
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload
//index.js
Page({
onLoad: function(options) {
//页面加载-----(一个页面只会调用一次)
},
onReady: function() {
//页面渲染-----(一个页面只会调用一次)
},
onShow: function() {
//页面显示-----(每次打开页面都会调用一次)
},
onHide: function() {
//页面隐藏-----(当navigateTo或底部tab切换时调用)
},
onUnload: function() {
//页面卸载-----(当redirectTo或navigateBack的时候调用)
},
})
//其他 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问
（3）应用生命周期影响页面生命周期
- 小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
- 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
- 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法
视图层和逻辑层数据绑定
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
this.setData({
text: 'changed data'
})
},
changeItemInArray: function() {
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})
创建小程序页面步骤
- 在pages 中添加一个目录 ,选中page,右击鼠标新建一个文件夹test（或者点击+号，逐个添加目录，添加目录下面所需要的文件）
- 新建一个wxml 文件,在test文件夹底下新建一个wxml空文件
-
编辑test.wxml 文件
<view class="container"> <text>这是test页面！！！</text> </view> -
同样的方法，创建test.js文件，编辑test.js文件
//test.js //获取应用实例 var app = getApp() Page({ data: { userInfo: {} }, onLoad: function () { console.log('onLoad test'); } }) -
将test 页面加入 app.json,打开全局文件 app.json，在文件里面添加 "pages/test/test"（加入一条 test 页面所在的目录 ）
-
在首页加入跳转访问链接, 在首页写一个页面入口 ，跳转到我们要测试的页面上，直接在首页 pages/index/index.wxml 添加一段代码一句链接
<view class="btn-area"> <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator> </view> -
测试,保存代码，点击上面的编译按钮，所有代码运行起来，点击首页的“跳转到test页面”，跳转成功。
-
设置页面标题,找到 pages/test/ 目录 新建一个 test.json 文件 加入如下代码。
{ "navigationBarTitleText": "test详情页" }
网友评论