微信小程序新手教程小程序示例

微信小程序新手教程小程序示例，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
创建快捷项目

文章插图
app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
},
onShow:function() {
console.log("show");
},
onHide:function() {
console.log("hide");
}
})
注意必须在 app.js 中注册App()，不能注册多个。
onLaunch ：程序初始化执行，且只执行一次。
onShow :程序启动，或从程序后台进入前台时执行。
onHide :程序从前台进入后台时执行。
可以添加任意函数到OBJECT中，使用this访问。
底部导航
添加images目录，放入图片资源并添加主程序页面

文章插图
添加底部导航tabBar
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/main/main"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#dddddd",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar":{
"color":"#000",
"selectedColor":"#48c33c",
"borderStyle":"block",
"backgroundColor":"#ffffff",
"list":[{
"pagePath":"pages/index/index",
"iconPath":"images/footer/index.png",
"selectedIconPath":"images/footer/indexS.png",
"text":"首页"
},
{
"pagePath":"pages/logs/logs",
"iconPath":"images/footer/logs.png",
"selectedIconPath":"images/footer/logsS.png",
"text":"日志"
},
{
"pagePath":"pages/main/main",
"iconPath":"images/footer/main.png",
【微信小程序新手教程小程序示例】"selectedIconPath":"images/footer/mainS.png",
"text":"主程序"
}
]
}
}
color ：文字默认颜色
selectedColor ：文字选中颜色
borderStyle ：上边框颜色(只支持black/white)
backgroundColor ：背景色
list ：菜单列表
list属性
pagePath ：页面路径(需要在pages中初始化)
iconPath ：图片路径，大小限制40kb
selectedIconPath ：选中样式图片路径，大小限制40kb
text ：按钮文字

文章插图
数据绑定

文章插图