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

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

　　创建快捷项目

　　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 ：按钮文字

　　数据绑定