小程序框架总结

发布：2018-01-25 09:31浏览：次来源：网络作者：tianshu

1.框架概述

2.项目目录结构

小程序框架总结(图3)

全局配置主要设置一些全局的应用参数，全局的样式等。

3. json配置

3.1 全局json文件app.json

/*app.json可配置的参数：
1.pages:配置程序页面路径
2.window：设置窗口的表现样式
3.tabBar：设置导航tab表现样式
4.networkTimeout：设置网络超时时间
5.debug：设置是否开启debug模式（开发时使用）
*/
{
/*页面配置,全局的页面必须在这里声明，否则后面使用时将找不到*/
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/music/music",
"pages/game/game"
],
"window":{
"backgroundTextStyle":"light",//下拉背景字体 loading图片样式
"navigationBarBackgroundColor": "#fff",//导航栏背景颜色
"navigationBarTitleText": "WeChat",//导航栏文字
"navigationBarTextStyle":"black",//导航栏标题颜色
"backgroundColor": "#ffffff",//窗口背景色
"enablePullDownRefresh": true //是否开启下拉刷新
},

"tabBar": {
/*设置导航栏tab选项list*/
"list": [
{
"pagePath": "pages/index/index",//链接路径
"text": "首页",//tab导航文字
"iconPath":"/image/wechat.png",//tab图标
"selectedIconPath":"/image/wechat.png"//选中图标
},
{
"pagePath": "pages/music/music",
"text": "音乐",
"iconPath":"/image/wechat.png",
"selectedIconPath":"/image/wechat.png"
},
{
"pagePath": "pages/game/game",
"text": "游戏",
"iconPath":"/image/wechat.png",
"selectedIconPath":"/image/wechat.png"
},
{
"pagePath": "pages/logs/logs",
"text": "文学",
"iconPath":"/image/wechat.png",
"selectedIconPath":"/image/wechat.png"

}
],
"borderStyle":"black",//边框颜色
"position":"top"//tab位置，top/bottom
},
"networkTimeout": {
"request": 20000,//wx.request（request请求）的超时时间
"connectSocket": 20000,//wx.connectSocket（socket请求）的超时时间
"uploadFile": 20000,//wx.uploadFile（上传文件）的超时时间
"downloadFile": 20000//wx.downloadFile（下载文件）的超时时间
},
"debug":true //开启debug模式，开发所用
}
ps:json似乎不能使用注释，这里只是为了方便查看，不可在项目中加入。
3.2 单个页面json文件page.json
/*
page.json只能简单的配置window的一些简单样式
*/
{
"navigationBarTitleText": "String",//设置导航栏标题文字
"navigationBarTextStyle": "white",//设置导航标题颜色
"navigationBarBackgroundColor": "#000000",//设置导航栏背景色
"backgroundColor": "#ffffff",//设置窗口背景色
"backgroundTextStyle": "dark",//设置下拉背景字体，loading图片样式
"enablePullDownRefresh": false,//设置是否开启下拉刷新
"disableScroll":false //设置是否禁止滑动
}

4.逻辑层

4.1 全局js文件app.js

//app()注册小程序，注意不能注册多个
App({
//监听小程序初始化，当小程序初始化完成时会触发发，且全局只触发一次
onLaunch: function() {

},
//小程序启动或者从后台进入前台时触发
onShow: function() {
},
//小程序从前台进入后台时触发
onHide: function() {
},
//小程序发生脚本错误，api调用失败时触发
onError: function(msg) {
console.log(msg)
},
//其他任意用户定义的函数
anyCustomFunc:function(){
},
//用户自定义的全局数据，可以通过var app = getApp()获取app实例，再通过app.globalData.userInfo获取数据
globalData:{
userInfo:' global data',
otherCustomData:'other custom data'
}
})

4.2 单个页面js文件page.js

//获取注册的的app实例
var app = getApp()
//注册页面实例
Page({
//页面初始化数据,视图层通过<view>{{text}}</view>绑定
data: {
text: "This is page init data."
},
//监听页面加载
onLoad: function(options) {
},
//监听页面初次渲染完成
onReady: function() {
},
//监听页面显示
onShow: function() {
},
//监听页面隐藏
onHide: function() {
},
//监听页面卸载
onUnload: function() {
},
//用户下拉刷新触发监听
onPullDownRefresh: function() {
},
//用户滑到底部触发监听
onReachBottom: function() {
},
//用户点击右上角分享触发监听
onShareAppMessage: function () {
return {
title: '自定义分享标题',
desc: '自定义分享描述',
path: '/page/user?id=123'
}
},
//事件处理(自定义函数)
viewTap: function() {
//事件触发后，通过setData()更新页面显示数据
this.setData({
text: 'Set some data for updating view.'
})
},
//用户自定义数据，最好与页面初始化数据分开
customData: {
data1: 'custom data'
}
})

5.视图层

5.1 全局/单个页面 wxss文件(app.wxss/page.wxss)

（1）概述

wxss为wxml的样式文件，大部分特性与css一致

（2）相对于CSS的不同于扩展

2.1）尺寸单位改为了rpx

2.2）样式导入改成了 @import "filename.wxss"

（3）选择器

5.2 单个页面文件page.wxml

(1) 概述

page.wxml文件定义用户界面（也就是所谓的UI），通过数据绑定和事件绑定从JS逻辑层获取数据更新UI显示，达到动态更新页面的效果。

(2)数据绑定

//page.js
Page({
data:{
testdata:'hello i am js data!'
}
})
//page.wxml
<view>{{testdata}}</view>

(3)事件绑定

//page.js
Page({
data:{
testdata:'hello i am js data!'
},
//编写事件响应函数，改变显示数据
tapEvent:function(){
this.setData(
{
testdata:'can you see me?'
}
)
}
})
//page.wxml 通过bindtap指定事件为tapEvent
<button bindtap="tapEvent">点我试试</button>
<view>{{testdata}}</view>