這篇文章主要為大家展示了“微信小程序中函數(shù)定義、頁面渲染的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中函數(shù)定義、頁面渲染的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):成都天府聯(lián)通服務(wù)器托管,成都服務(wù)器租用,成都天府聯(lián)通服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動機(jī)房,聯(lián)通機(jī)房。

小程序邏輯app.js：定義App函數(shù)用來注冊一個小程序，包含全局?jǐn)?shù)據(jù)和函數(shù)，指定小程序的生命周期回調(diào)等。整個小程序只有一個 App 實例，全部頁面共享使用。

//app.js
App({
 onLaunch: function () {
 // 展示本地存儲能力
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 // 登錄
 wx.login({
  success: res => {
  // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
  }
 })
 // 獲取用戶信息
 wx.getSetting({
  success: res => {
  if (res.authSetting['scope.userInfo']) {
   // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框
   wx.getUserInfo({
   success: res => {
    // 可以將 res 發(fā)送給后臺解碼出 unionId
    this.globalData.userInfo = res.userInfo
    // 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
    // 所以此處加入 callback 以防止這種情況
    if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
    }
   }
   })
  }
  }
 })
 },
 globalData: {
 userInfo: null
 }
})

生命周期函數(shù)：

屬性	類型	描述	觸發(fā)時機(jī)
onLaunch	Function	生命周期回調(diào)—監(jiān)聽小程序初始化	小程序初始化完成時（全局只觸發(fā)一次）
onShow	Function	生命周期回調(diào)—監(jiān)聽小程序顯示	小程序啟動，或從后臺進(jìn)入前臺顯示時
onHide	Function	生命周期回調(diào)—監(jiān)聽小程序隱藏	小程序從前臺進(jìn)入后臺時
onError	Function	錯誤監(jiān)聽函數(shù)	小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時觸發(fā)，會帶上錯誤信息
onPageNotFound	Function	頁面不存在監(jiān)聽函數(shù)	小程序要打開的頁面不存在時觸發(fā)，會帶上頁面信息回調(diào)該函數(shù)
其他	Any	開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問

頁面js：

頁面js中定義分享函數(shù)，定義之后右上角菜單才可以分享：

Page({
 onShareAppMessage: function (res) {
 if (res.from === 'button') {
  // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
  console.log(res.target)
 }
 return {
  title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
  path: '/page/user?id=123',
  imageUrl: 'https://msllws.top/Public/uploads/2018-09-19/5ba1efaec1b1f.jpg'
 }
 }
})

頁面js中調(diào)用全局函數(shù)：

var AppInstance = getApp()
console.log(AppInstance.globalData)

工具欄utils.js：存放常用的工具函數(shù)，例如日期格式化、時間格式化函數(shù)。定義后通過module.exports注冊，在其他頁面才可以使用。

練習(xí)：做出如下圖頁面及樣式

weather.js：

Page({
 data: {
 temp:"4℃",
 low:"-1℃",
 high:"10℃",
 type:"晴",
 city:"北京",
 week:"星期四",
 weather:"無持續(xù)風(fēng)行 微風(fēng)級"
 }
})

weather.wxml：

<view class="content">
 <view class="today">
 <view class="info">
  <view class="temp">{{temp}}</view>
  <view class='lowhigh'>{{low}}</view>
  <view class='type'>{{type}}</view>
  <view class='city'>{{city}}</view>
  <view class='week'>{{week}}</view>
  <view class='weather'>{{weather}}</view>
 </view>
 </view>
</view>

weather.wxss：

.content{
 font-family: 微軟雅黑,宋體;
 font-size:14px;
 background-size: cover;
 height: 100%;
 width: 100%;
 color: #333333;
}
.today{
 padding-top: 70rpx;
 height: 50%;
}
.temp{
 font-size: 80px;
 text-align: center;
}
.city{
 font-size:20px;
 text-align: center;
 margin-top: 20rpx;
 margin-right: 10rpx;
}
.lowhigh{
 font-size: 12px;
 text-align: center;
 margin-top: 30rpx;
}
.type{
 font-size: 16px;
 text-align: center;
 margin-top: 30rpx;
}
.week{
 font-size: 12px;
 text-align: center;
 margin-top: 30rpx;
}
.weather{
 font-size: 12px;
 text-align: center;
 margin-top: 20rpx;
}

數(shù)據(jù)綁定：

<!--wxml-->
<view> {{message}} </view>

page.js：

Page({
 data: {
 message: 'Hello MINA!'
 }
})

列表渲染：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

page.js

Page({
 data: {
 array: [1, 2, 3, 4, 5]
 }
})

條件渲染：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
 data: {
 view: 'MINA'
 }
})

模板：

<!--wxml-->
<template name="staffName">
 <view>
 FirstName: {{firstName}}, LastName: {{lastName}}
 </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
 data: {
 staffA: {firstName: 'Hulk', lastName: 'Hu'},
 staffB: {firstName: 'Shang', lastName: 'You'},
 staffC: {firstName: 'Gideon', lastName: 'Lin'}
 }
})

事件：

<view bindtap="add"> {{count}} </view>

Page({
 data: {
 count: 1
 },
 add: function(e) {
 this.setData({
  count: this.data.count + 1
 })
 }
})

以上是“微信小程序中函數(shù)定義、頁面渲染的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：微信小程序中函數(shù)定義、頁面渲染的示例分析
文章來源：http://vcdvsql.cn/article4/gjcoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、軟件開發(fā)、全網(wǎng)營銷推廣、建站公司、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)