全局配置：

1.1配置所有頁面路徑：在app.json的{pages：[配置所有頁面]}，將首頁放置在第一位，在app.json必須寫上所有頁面的路徑，要不然會報錯，每個頁面的wxss樣式文件只在當(dāng)前文件里有效 1.2設(shè)置tabBar導(dǎo)航：

"tabBar": {
"color": "#7A7E83",//字體顏色
"selectedColor": "#3cc51f",//選中時候字體的顏色
"borderStyle": "black",//tabbar邊框的顏色，只有黑和白
"backgroundColor": "#fff",//背景顏色
"list": [//2-5，只能設(shè)置2-5個導(dǎo)航
{
"pagePath": "page/newPage/index",//導(dǎo)航頁面路徑，根據(jù)路徑匹配tarbar導(dǎo)航是否顯示
"iconPath": "image/icon_component.png",//圖標(biāo)圖片的路徑
"selectedIconPath": "image/icon_component_HL.png",//選中的時候圖片的路徑
"text": "首頁"//按鈕文本
},
{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "組件"
}
]
}

?

3.注冊程序：app.js

設(shè)置相對應(yīng)的生命周期函數(shù)（初始化完成時onLaunch,顯示onShow，隱藏onHide，錯誤的時候onerror） 設(shè)置全局?jǐn)?shù)據(jù)：globalData屬性進行設(shè)置，getApp（）可獲取app.js的配置對象 ? 4.1.導(dǎo)入文件方式：<import src='文件路徑'/>

<import src="a.wxml"/><寫要導(dǎo)入的具體內(nèi)容標(biāo)簽>

?

?

4.2.將整個文件內(nèi)容導(dǎo)入并顯示方式：<include??src='文件路徑'/> include將頁面header.wxml的內(nèi)容全部導(dǎo)入，相當(dāng)于將所有內(nèi)容都復(fù)制過來

<include src="header.wxml"/>
const openIdUrl = require('./config').openIdUrl

?

5.小程序應(yīng)用的生命周期啟示 一般還會將全局的數(shù)據(jù)放置到初始化全局對象的globalData這個對像上

App({onLaunch: function () {console.log('App Launch')},//小程序顯示的時候（啟動/后臺切換到前臺的時候啟動）onShow: function () {console.log('App Show')},//切換至后臺，切換到其他微信頁面，切換到其他程序，就會調(diào)用起這個函數(shù)onHide: function () {console.log('App Hide')},globalData: {hasLogin: true,openid: null},// lazy loading openidgetUserOpenId: function(callback) {var self = thisif (self.globalData.openid) {callback(null, self.globalData.openid)} else {wx.login({success: function(data) {wx.request({url: openIdUrl,data: {code: data.code},success: function(res) {console.log('拉取openid成功', res)self.globalData.openid = res.data.openidcallback(null, self.globalData.openid)},fail: function(res) {console.log('拉取用戶openid失敗，將無法正常使用開放接口等服務(wù)', res)callback(res)}})},fail: function(err) {console.log('wx.login 接口調(diào)用失敗，將無法正常使用開放接口等服務(wù)', err)callback(err)}})}}
})

?

? 6.index.js:存儲數(shù)據(jù)和方法（index.wxml視圖頁面元素相當(dāng)于html）index.json表示當(dāng)前頁面的配置 ?

Page({//表示當(dāng)前文件下的page全局的page對象，所有的方法和數(shù)據(jù)/*** 頁面的初始數(shù)據(jù)*/data: {msg:'這是data里的數(shù)據(jù)',helloMsg: 'helloWorld',obj:{helloMsg:'歡迎詞',otherText:'其他信息'},},changeMsg:function(){this.setData({msg:'這是改變后的內(nèi)容',})},clicktap:function(e){console.log(e)},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady: function () {var appConfig =  getApp()//getApp（）是獲取全局變量globalData方法下的數(shù)據(jù)的函數(shù)方法
    console.log(appConfig)if(appConfig.globalData.hasLogin){this.setData({msg:'已登陸完成'})}else{this.setData({msg:'還未登陸，請登錄'})}},/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow: function () {var  pageList = getCurrentPages()console.log(pageList)},/*** 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {},goPage(){// wx.navigateTo({//   url: '/page/component/pages/button/button',// })
    wx.redirectTo({url: '/page/component/pages/button/button',})}
})

?

轉(zhuǎn)載于:https://www.cnblogs.com/Dark-fire-liehuo/p/9593473.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发工具的基本应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。