app.js是小程序的腳本代碼。我們(men) 可以在這個(ge) 文件中監聽並處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐(feng) 富的 API，如本例的同步存儲(chu) 及同步讀取本地數據。
app.json是對整個(ge) 小程序的全局配置。我們(men) 可以在這個(ge) 文件中配置小程序是由哪些頁麵組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。
app.wxss是整個(ge) 小程序的公共樣式表。我們(men) 可以在頁麵組件的 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 = thisif(this.globalData.userInfo){typeof cb == "function" && cb(this.globalData.userInfo)}else{//調用登錄接口wx.login({success: function () {wx.getUserInfo({success: function (res) {that.globalData.userInfo = res.userInfotypeof cb == "function" && cb(that.globalData.userInfo)}})}})}},globalData:{userInfo:null},onShow:function() {console.log("show");},onHide:function() {console.log("hide");}})
注意必須在 app.js 中注冊(ce) App() ，不能注冊(ce) 多個(ge) 。
onLaunch：程序初始化執行，且隻執行一次。
onShow:程序啟動，或從(cong) 程序後台進入前台時執行。
onHide:程序從(cong) 前台進入後台時執行。
可以添加任意函數到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：按鈕文字
數據綁定
main.js
Page({
data:{
text:"這是一個(ge) 頁麵"
},
onLoad:function(options){
// 頁麵初始化 options為(wei) 頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關(guan) 閉
}
})
main.wxml
<view>
<text>{{text}}</text>
</view>
view組件
flex-direction： row：橫向排列；column：縱向排列
justify-content：flex-start：左對齊； flex-end：右對齊；center：居中；space-between：兩(liang) 端分散對齊；space-around：居中分散對齊
align-items：flex-start：垂直頂部；flex-end：垂直底部；center：垂直居中
輪播
<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
<swiper-item>
<view style="background: red; height: 150px"></view>
</swiper-item>
<swiper-item>
<view style="background: green; height: 150px"></view>
</swiper-item>
<swiper-item>
<view style="background: blue; height: 150px"></view>
</swiper-item>
</swiper>
屬性名 類型 默認值 說明
indicator-dots Boolean false 是否顯示麵板指示點
autoplay Boolean false 是否自動切換
current Number 0 當前所在頁麵的 index
interval Number 5000 自動切換時間間隔
duration Number 1000 滑動動畫時長
bindchange EventHandle current 改變時會(hui) 觸發 change 事件，event.detail = {current: current}
注意：其中隻可放置組件，其他節點會(hui) 被自動刪除。
僅(jin) 可放置在組件中，寬高自動設置為(wei) 100%。
獲取輪播改變事件
listenSwiper:function(e) {
console.log(e)
},
值
Object {target: Object, currentTarget: Object, type: "change", timeStamp: 35345, detail: Object}
currentTarget
:
Object
detail
:
Object
target
:
Object
timeStamp
:
35345
type
:
"change"
__proto__
:
Object
圖標 icon
type 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 默認23px
color 同css的color
<!--成功圖標-->
<icon type="success" size="40"/>
<!--安全成功標誌圖標-->
<icon type="safe_success" size="40"/>
<!--提示信息圖標-->
<icon type="info" size="40"/>
<!--帶圓的信息提示圖標-->
<icon type="info_circle" size="40"/>
<!--不帶圓的成功圖標-->
<icon type="success_no_circle" size="40"/>
<!--帶圓的成功圖標-->
<icon type="success_circle" size="40"/>
<!--警告圖標-->
<icon type="warn" size="40"/>
<!--帶圓的等待圖標-->
<icon type="waiting_circle" size="40"/>
<!--等待圖標-->
<icon type="waiting" size="40"/>
<!--下載圖標-->
<icon type="download" size="40"/>
<!--取消圖標-->
<icon type="cancel" size="40"/>
<!--清除圖標-->
<icon type="clear" size="40"/>
<!--改變顏色的success-->
<icon type="success" size="40" color="red"/>
進度條
percent Float 無 百分比0~100
show-info Boolean false 在進度條右側(ce) 顯示百分比
stroke-width Number 6 進度條線的寬度，單位px
color Color #09BB07 進度條顏色
active Boolean false 進度條從(cong) 左往右的動畫
<progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/>
按鈕 button
<button type="defaule" bindtap="clickButton">Defalut</button>
<!--原始顏色，不可點擊狀態， 正在加載狀態-->
<button type="primary" disabled="true" loading="true">Primary</button>
<button type="warn">warn</button>
注：button-hover 默認為(wei) {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
按鈕點擊事件
clickButton: function(e) {
console.log(e);
},
CHECKBOX
<!--checkbox-group是checkbox的組，使用bindchange，監聽數據選中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<label style="display: flex;" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
綁定事件
綁定數據
items: [
{
name: 'S',
value: 'S',
checked: 'true'
},
{
name: 'O',
value: 'O'
},
{
name: 'N',
value: 'N'
},
{
name: 'G',
value: 'G'
},
{
name: 'SONG',
value: 'SONG'
}
]
綁定監聽事件
listenCheckboxChange:function(e) {
console.log(e);
},
至此頁麵
源代碼（Git）：https://github.com/yz-mengxiangsong/wechatDemo.git
服務項目
網站首頁
TEL：021-61554458
立即谘詢