小程序是什么框架?微信小程序框架详解
小程序是什么框架?微信小程序框架详解。微信自从开通微信小程序功能之后， 微信小程序就成为互联网争先讨论的热门话题。但是不知道大家是不是都清楚的知道小程序是什么框架?小编整理了一些关于微信小程序框架的详解资料，供大家参考。
1.框架概述
2.项目目录结构
全局配置主要设置一些全局的应用参数，全局的样式等。
3. json配置
3.1 全局json文件app.json
/*app.json可配置的参数：
1.pages:配置程序页面路径
2.window：设置窗口的表现样式
3.tabBar：设置导航tab表现样式
4workTimeout：设置网络超时时间
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({
//页面初始化数据,视图层通过{{text}}绑定
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{{testdata}}
(3)事件绑定
//page.js
Page({
data:{
testdata:'hello i am js data!'
},
//编写事件响应函数，改变显示数据
tapEvent:function(){
this.setData(
{
testdata:'can you see me?'
}
)
}
})
//page.wxml 通过bindtap指定事件为tapEvent
点我试试
{{testdata}}
以上就是小编整理的小程序是什么框架和微信小程序框架详解的全部内容，希望对大家有所帮助,更多小程序码、小程序资讯请关注微小乔网站。
相关推荐：
微信小程序中form 表单提交和取值实例详解
最实用的微信小程序分享朋友圈的技巧
微信小程序分享到朋友圈方法 微信小程序可以分享朋友圈?