国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

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

來源：懂視網 責編：小采 時間：2020-11-27 21:59:38
文檔

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

微信小程序學習筆記之函數定義、頁面渲染圖文詳解:前面一篇介紹了微信小程序目錄結構、基本配置。這里再來介紹一下函數定義、頁面渲染。 小程序邏輯app.js：定義App函數用來注冊一個小程序，包含全局數據和函數，指定小程序的生命周期回調等。整個小程序只有一個 App 實例，全部頁面共享使用。 //ap
推薦度：
導讀微信小程序學習筆記之函數定義、頁面渲染圖文詳解:前面一篇介紹了微信小程序目錄結構、基本配置。這里再來介紹一下函數定義、頁面渲染。 小程序邏輯app.js：定義App函數用來注冊一個小程序，包含全局數據和函數，指定小程序的生命周期回調等。整個小程序只有一個 App 實例，全部頁面共享使用。 //ap

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

小程序邏輯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
 })
 }
})

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

微信小程序學習筆記之函數定義、頁面渲染圖文詳解:前面一篇介紹了微信小程序目錄結構、基本配置。這里再來介紹一下函數定義、頁面渲染。 小程序邏輯app.js：定義App函數用來注冊一個小程序，包含全局數據和函數，指定小程序的生命周期回調等。整個小程序只有一個 App 實例，全部頁面共享使用。 //ap
推薦度：
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 91免费视频观看 | 日本激情一区二区三区 | 国产精品高清视亚洲一区二区 | 欧美一级淫片吊带丝袜 | 2022国产精品福利在线观看 | 欧美日本综合 | 国产精品成人一区二区1 | 精品一区二区在线观看 | 久久99精品久久久久久青青91 | 亚洲精品乱码久久久久久 | 精品国产综合区久久久久99 | 国产日韩一区二区三区在线观看 | 美女视频黄a视频全免费网站下载 | 欧美日本综合 | 国产精品一区二区久久精品 | 干比网| 中文字幕日韩一区二区三区不卡 | 亚洲日韩欧美综合 | 国产高清在线免费 | 国产一区二区高清 | 伊人久久精品久久亚洲一区 | 欧美日韩国产在线播放 | 久久艹精品 | 久久精品一级 | 亚洲欧美日韩成人一区在线 | 欧美日韩国产在线观看 | 精品国产高清自在线一区二区三区 | 最刺激黄a大片免费观看 | 不卡日本 | a毛片在线 | 久久精品国产免费中文 | 国产97在线观看 | 午夜免费视频 | 久久永久免费视频 | 亚洲1页 | 中文字幕欧美在线 | 久久精品国产一区二区三区日韩 | 精品一区二区三区四区在线 | 日韩午夜在线观看 | 国产一区二区三区毛片 | 亚洲精品123区 |