【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】開(kāi)發(fā)微信小程序教程示例

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】開(kāi)發(fā)微信小程序教程示例

1.獲取微信小程序的AppID（注意這里的AppID是小程序?qū)ｉT(mén)的id，可以在登錄微信公眾號(hào)的小程序里面看到，無(wú)AppID某些功能會(huì)受到限制?。?upload/information/20201208/260/6942.jpg2.創(chuàng)建項(xiàng)目（項(xiàng)目的名稱(chēng)一般是英文，盡量不使用中文，可能會(huì)報(bào)錯(cuò)）/upload/information/20201208/260/6943.jpg3.編寫(xiě)代碼（小程序有自己特定的標(biāo)簽）//app.js

App({

onLaunch:

function

()

{//調(diào)用API從本地緩存中獲取數(shù)據(jù)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{

//調(diào)用登錄接口

wx.login({

success:

function

()

{

wx.getUserInfo({

success:

function

(res)

{

that.globalData.userInfo

=

res.userInfo;

typeof

cb

==

"function"

&&

cb(that.globalData.userInfo)

}

})

}

});

}

},

globalData:{

userInfo:null

}

}){

"pages":["pages/index/index","pages/logs/logs"

],

"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":

"#fff","navigationBarTitleText":

"WeChat","navigationBarTextStyle":"black"

}

}/**app.wxss**/.container

{

height:

100%;

display:

flex;

flex-direction:

column;

align-items:

center;

justify-content:

space-between;

padding:

200rpx

0;

box-sizing:

border-box;

}<!--index.wxml--><view

class="container">

<view

bindtap="bindViewTap"

class="userinfo"><image

class="userinfo-avatar"

src="{{userInfo.avatarUrl}}"

background-size="cover"></image><text

class="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

<view

class="usermotto"><text

class="user-motto">{{motto}}</text>

</view></view>//index.js//獲取應(yīng)用實(shí)例var

app

=

getApp()

Page({

data:

{

motto:

'Hello

World',

userInfo:

{}

},

//事件處理函數(shù)

bindViewTap:

function()

{

wx.navigateTo({

url:

'../logs/logs'

})

},

onLoad:

function

()

{console.log('onLoad')var

that

=

this//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)

app.getUserInfo(function(userInfo){

//更新數(shù)據(jù)

that.setData({

userInfo:userInfo

})

})

}

})/**index.wxss**/.userinfo

{

display:

flex;

flex-direction:

column;

align-items:

center;

}.userinfo-avatar

{

width:

128rpx;

height:

128rpx;

margin:

20rpx;

border-radius:

50%;

}.userinfo-nickname

{

color:

#aaa;

}.usermotto

{

margin-top:

200px;

}<!--logs.wxml--><view

class="container

log-list">

<block

wx:for="{{logs}}"

wx:for-item="log"><text

class="log-item">{{index

+

1}}.

{{log}}</text>

</block></view>//logs.jsvar

util

=

require('../../utils/util.js')

Page({

data:

{

logs:

[]

},

onLoad:

function

()

{this.setData({

logs:

(wx.getStorageSync('logs')

||

[]).map(function

(log)

{return

util.formatTime(new

Date(log)