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

創新互聯公司專注于錫林浩特企業網站建設,成都響應式網站建設,商城網站建設。錫林浩特網站建設公司,為錫林浩特等地區提供建站服務。全流程定制網站制作，專業設計，全程項目跟蹤，創新互聯公司專業和態度為您提供的服務

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

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

生命周期函數：

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

頁面js：

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

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

頁面js中調用全局函數：

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

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

練習：做出如下圖頁面及樣式

weather.js：

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

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;
}

數據綁定：

<!--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
 })
 }
})

以上是“微信小程序中函數定義、頁面渲染的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站名稱：微信小程序中函數定義、頁面渲染的示例分析-創新互聯
網頁地址：http://vcdvsql.cn/article42/jidhc.html

成都網站建設公司_創新互聯，為您提供響應式網站、建站公司、網站維護、網站內鏈、品牌網站設計、網站建設

廣告

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