欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序學習筆記之函數(shù)定義、頁面渲染圖文詳解

 更新時間：2019年03月28日 11:25:33   作者：李維山  
這篇文章主要介紹了微信小程序學習筆記之函數(shù)定義、頁面渲染,結合實例形式較為詳細的分析了微信小程序中函數(shù)的定義、生命周期、模板調(diào)用、樣式控制等操作技巧,并配合圖文形式進行了詳細說明,需要的朋友可以參考下

前面一篇介紹了微信小程序目錄結構、基本配置。這里再來介紹一下函數(shù)定義、頁面渲染。

小程序邏輯app.js：定義App函數(shù)用來注冊一個小程序，包含全局數(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)授權，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框
   wx.getUserInfo({
   success: res => {
    // 可以將 res 發(fā)送給后臺解碼出 unionId
    this.globalData.userInfo = res.userInfo
    // 由于 getUserInfo 是網(wǎng)絡請求，可能會在 Page.onLoad 之后才返回
    // 所以此處加入 callback 以防止這種情況
    if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
    }
   }
   })
  }
  }
 })
 },
 globalData: {
 userInfo: null
 }
})

生命周期函數(shù)：

屬性 類型 描述 觸發(fā)時機
onLaunch Function 生命周期回調(diào)—監(jiān)聽小程序初始化 小程序初始化完成時（全局只觸發(fā)一次）
onShow Function 生命周期回調(diào)—監(jiān)聽小程序顯示 小程序啟動，或從后臺進入前臺顯示時
onHide Function 生命周期回調(diào)—監(jiā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)轉發(fā)按鈕
  console.log(res.target)
 }
 return {
  title: '自定義轉發(fā)標題',
  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注冊，在其他頁面才可以使用。

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

weather.js：

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

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

希望本文所述對大家微信小程序設計有所幫助。

相關文章

最新評論