安装必要内容：
首先安装nodejs：node.js
安装完成之后下载微信开发者工具，进行安装。
本文所有内容均参考自 微信公众平台/小程序 ，官方网站写的很详细
这里只不过是为了将个人的学习过程记录，方便分享复习。
框架介绍
微信小程序框架十分简单且容易上手，分为两部分
视图层：*.wxml、*.wxss、
逻辑层：*.js 基于javascript
整个框架的核心是一种数据绑定系统，框架会使数据和视图保持同步——当逻辑层修改数据时，视图层会做相应的更新。
文件结构
小程序文件结构也很简单，一个主题app的描述以及各个页面的描述
小程序主体部分详解
app.js
在app.js中主要实现了注册一个小程序（页面名.js主要是注册页面），主要是调用了一个名为App()的函数
其接收了一个object参数，用于指定小程序的生命周期等等...
[javascript] view plain copy
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function (options) {
console.log(生命周期函数--监听小程序初始化);
console.log(options.path);//打开小程序的路径 String
console.log(options.query);//打开小程序的query Object
console.log(options.scene);//打开小程序的场景值 Number
console.log(options.shareTicket);//转发信息 String
console.log(options.referrerInfo);//当场景为由另一个小程序打开时，返回此字段 Object
console.log(options.referrerInfo.appId);//来源小程序的 appId String
console.log(options.referrerInfo.extraData);//来源小程序传过来的数据 Object
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
console.log(生命周期函数--监听小程序显示);
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
console.log(生命周期函数--监听小程序隐藏);
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
console.log(错误监听函数);
}
/**
* 其他自定义函数，全局变量
*/
globalData:{
userName:cj,
userAge:998
}
})
补充A：其中onLaunch以及onShow具有相同的参数
补充B：场景值：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/scene.html
补充C：getApp()函数可以在其他js中获取到小程序实例，getApp().globalData.userName
补充D：App()必须在app.js中注册，且为一；在App()中不要使用getApp()，使用this即可；onLaunch中不要调用getCurrentPages()，page还没有生成；使用getApp()获得实例后，不要调用生命周期函数
app.json
作为全局配置文件，可以配置页面的多种属性，包含有5个子元素，
pages;window;tabBar;networkTimeout;debug
注意！！：JSON文件中//注释是错误的，使用的话先要把所有注释都删除，这里加上只是为了方便理解内容
完整的配置以及全参数
[javascript] view plain copy
{
pages: [//必须
pages/index/index,//小程序中每增减页面，都要对这边进行增减
pages/logs/index
],
window: {//非必须
navigationBarBackgroundColor: #000000,//导航栏默认颜色
navigationBarTextStyle: white,//导航栏标题颜色，默认白色，仅支持黑白
navigationBarTitleText: 微信接口功能演示,//导航栏文字内容
backgroundColor: #ffffff,//窗口默认背景色
backgroundTextStyle: dark,//下拉背景字体、loading图默认样式，仅支持dark/light
enablePullDownRefresh:false //是否开启下拉刷新，默认false
},
tabBar: {//非必须，底部切换页面
color:,//必须/tab文字默认颜色
selectedColor: ,//必须/tab文字选中的颜色
backgroundColor: ,//必须/tab背景色
borderStyle: ,//tab边框颜色，默认black，仅支持黑白
position: bottom,//图标 top的时候则不显示
list: [//必须/tab列表
{
pagePath: pages/index/index,//必须/页面路径
text: 首页,//必须/按钮文字
iconPath:,//图片路径
selectedIconPath://选中时图片路径
},
{
pagePath: pages/logs/logs,
text: 日志
}
]
},
networkTimeout: {//非必须 设置网络请求时间
request: 10000,//wx.request的超时时间，单位毫秒，默认为：60000
connectSocket: 10000,//wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile: 10000, //wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile:10000 //wx.downloadFile的超时时间，单位毫秒，默认为：60000
},
debug: true //非必须 是否开启debug模式
}
app.wxss
全局样式组件，和css差不多
简单的根据需求配置好上面的主体部分之后，就要开始创建页面了，上面也说过，页面是由逻辑层以及视图层组成，其中js和wxml最为重要。
推荐阅读：微信小程序生命周期和传值教程 微信小程序开发教程
参与讨论
发表评论