微信小程序開發(fā)(一)(共6頁)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上“微信”小程序開發(fā)(一)第一章 開發(fā)步驟第1節(jié):小程序構(gòu)成APP.JSONAPP.JSAPP.WXSS調(diào)用函數(shù)定義孌量引用接口組成頁面窗口參數(shù)公共樣式第2節(jié):APP.JSON結(jié)構(gòu) "pages": "pages/index/index", "pages/logs/logs" , "window": "backgroundTextStyle":"light", "navigationBarBackgroundColor": &quo

2、t;#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" Pages:小程序組成頁面;Windows:窗口樣式設(shè)定.第3節(jié):APP.JS結(jié)構(gòu):App( onLaunch: function () var logs = wx.getStorageSync('logs') | logs.unshift(Date.now() wx.setStorageSync('logs', log

3、s) , 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" &

4、amp;& cb(that.globalData.userInfo) ) ); , globalData: userInfo:null )第4節(jié):APP.WXSS結(jié)構(gòu).container height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;第5節(jié):頁面結(jié)構(gòu)1.頁面文件資源結(jié)構(gòu)Page_name.jsonPage_name.wxmlPage_nam

5、e.jsPage_name.wxss頁面配置文件頁面主文件頁面JS文件頁面樣式文件2.頁面配置文件:page_name.json頁面的配置文件是非必要的。當(dāng)有頁面的配置文件時(shí)，配置項(xiàng)在該頁面會覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認(rèn)配置。3.頁面主文件:page_name.wxml<view class="container"> <view bindtap="bindViewTap" class="userinfo">

6、<imageclass="userinfo-avatar"src="userInfo.avatarUrl" background-size="cover"></image> <text class="userinfo-nickname">userInfo.nickName</text> </view> <view class="usermotto"> <text class="user-motto"

7、>motto</text> </view></view>4.頁面JS文件:page_name.jsvar app = getApp()Page( data: motto: 'Hello World', userInfo: , bindViewTap: function() wx.navigateTo(url: './logs/logs)' , onLoad: function () var that = this app.getUserInfo(function(userInfo) that.setData( userInfo:userInfo ) ) )5.頁面樣式文件:page_name.wxss.userinfo display: flex; flex-direction: column; align-items: center;.userinfo-avatar width: 128rpx; height: 128rpx; margin: 20rpx; bo