溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“微信小程序常用功能有哪些及怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序常用功能有哪些及怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
小程序提供了全局的 getApp() 方法，可獲取當前小程序實例，一般用于在子頁面中獲取頂層應用。
// app.js
App({
globalData: 1
});
// page.js
var app = getApp();
console.log(app.globalData); // 獲取 globalData圖片目錄(images)、頁面目錄(pages)、公共腳本(utils)、全局配置(app.json、project.config.json)四個大的部分構成。
頁面目錄中，每個頁面配置完成會自動生成4個文件(JS、JSON、WXSS、WXML)。頁面邏輯，頁面配置，頁面樣式，頁面結構。
所有頁面需要在app.json中的pages中進行配置注冊。
導航欄的菜單配置需要在app.json中的tabBar中進行配置注冊。
全局變量需要在app.js的globalData中進行定義，通過var app = getApp() 調用。
公共腳本需要將定義好的function在module.exports中進行暴露， 暴露模塊接口。
autoplay、interval、duration....自動切換播放、播放間隔時間、播放動畫時間。
比如banner的左右滾動、公告的上下滾動（設置vertical為true）。
四種跳轉方式
wx.navigateTo 跳轉新頁面；
wx.switchTab 跳轉導航菜單頁面；
wx.redirectTo 關閉當前頁面，跳轉新頁面；
頁面標簽跳轉；
wx.navigateTo({
url: '../activity/news/detail?id=' + activityid
})wx.switchTab({
url: '../../index/index'
})wx.redirectTo({
url: '../activity/news/detail?id=' + activityid
})onLoad: function (options) {
var id = options.id;
}1、本地緩存
2、全局變量：
在 app.js 中的 this.globalData = { } 中放入要存儲的數；
在組件.js 中， 頭部 引入 const app = getApp(); 獲取到全局變量；
直接使用 app.globalData.key 來進行賦值和獲取值。
路由：
使用wx.navigateTo和wx.redirectTo時，可以通過在url后拼接 + 變量， 然后在目標頁面 通過在onLoad周期中，通過參數來獲取傳遞過來的值。
<text bindtap="pay" data-object-id="{{item.objectId}}" data-total-fee="{{item.amount}}" class="{{status != 0 ? 'hidden': ''}}">支付</text>接收時
function(e) {
var objectId = e.currentTarget.dataset.objectId;
var totalFee = e.currentTarget.dataset.totalFee;JS部分
wx.request({
url: app.globalData.requestUri + "/banners",
header: {
"Content-Type": "application/json"
},
method: "GET",
data: {
start: start,
maxResults: maxResults,
bannerType: bannerType
},
success: function (res) {
that.setData({
bannerList: res.data.items
})
}
})wx.request注意點
method 必須大寫；
GET時"Content-Type": "application/json"；
POST時"Content-Type": "application/x-www-form-urlencoded"
使用bindtap綁定方法。參數用data-*的形式傳遞。記得全部小寫。默認會放在dataset中。
openActivity: function (event) {
var params = event.currentTarget.dataset;
//dataset中多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)
//底部菜單要使用wx.switchTab 來跳轉界面
var type = params.type;
var activityType = params.activitytype;
var relativeId = params.relativeid;
}js部分代碼
onLoad: function (options) {
var id = options.id;
var that = this;
wx.request({
url: app.globalData.requestUri + "/infos/" + id,
header: {
"Content-Type": "application/json"
},
method: "GET",
success: function (res) {
that.setData({
news: res.data,
imgurl: app.globalData.domain + res.data.imgurl,
publishTime: util.formatTime1(res.data.publishTime,'Y-M-D h:m:s')
})
}
})
}頁面部分代碼
{{news.title}}
{{publishTime}}頁面引用公用js
var util = require("../../../utils/util.js");
var app = getApp();onPullDownRefresh: function () {
var that = this;
//下拉刷新，將pageNumber和pageSize分別設置成0和10，并初始化數據，讓數據重新通過loadRoom()獲取
that.setData({ start: 0, maxResults: 10, infoList: [] }) that.loadRooms(); wx.stopPullDownRefresh(); }onReachBottom: function () {
//上拉分頁,將頁碼加1，然后調用分頁函數
var that = this;
var start = that.data.start;
that.setData({
start: ++start
});
setTimeout(function () {
wx.showToast({
title: '加載中..',
}),
that.loadRooms();
}, 1000)
}需要在json中配置啟用下拉事件
{
"enablePullDownRefresh": true
}表單提交注意點
bindsubmit表單提交事件；
bindinput輸入框監控事件；
獲得表單提交數據
formSubmit: function (e) {
//獲得表單數據
var objData = e.detail.value;
var password = objData.password;
var mobile = objData.mobile;
var code = objData.code;
}緩存寫入
wx.setStorageSync('password', password);
wx.setStorageSync('mobile', mobile);緩存讀取、移除、清除所有
var mobile = wx.getStorageSync('mobile');
wx.removeStorageSync('mobile');
wx.clearStorage();提示信息和彈框，有icon時最多顯示7個字，icon為none時可顯示全部信息。
wx.showToast({
title: '登錄成功',
success: function() {
setTimeout(function() {
//要延時執行的代碼
//跳轉到成功頁面
wx.switchTab({
url: '../index/index'
})
},
2000) //延遲時間
}
})wx.showModal({
title: '確認',
content: '確認提交訂單',
success: function(res) {
if (res.confirm) {
console.log('確定')
} else {
console.log(取消')
}
}
})分享，imageUrl非必填
onShareAppMessage: function() {
return {
title: '金算子',
desc: '新聞資訊',
imageUrl: '../../images/home/home-add-01.png',
path: '../activity/news/detail',
success: function(res) {
},
fail: function() {
}
}
}打電話調用wx.makePhoneCall
phoneCall: function(mpbile) {
wx.makePhoneCall({
phoneNumber: "13724201432"
})
}自小程序基礎版本2.2.3起，組件的生命周期可以在lifetimes字段中聲明（這是推薦的方式，優先級最高）
lifetimes: {
created: function() {
// 組件實例化，但節點樹還未導入，因此這時不能用setData
},
attached: function() {
// 在組件實例進入頁面節點樹時執行
// 節點樹完成，可以用setData渲染節點，但無法操作節點
},
ready: function() {
// 組件布局完成，這時可以獲取節點信息，也可以操作節點
},
move: function() {
// 組件實例被移動到樹的另一個位置
},
detached: function() {
// 在組件實例被從頁面節點樹移除時執行
},
}程序生命周期
（1）onLaunch：初始化完成
（2）onHide：收起小程序到后臺
（3）onShow：展開小程序到前臺（熱啟動）
（4）onError：程序出錯
頁面生命周期
（1）onLoad：頁面冷啟動后，初次加載（只有一次）
（2）onShow：每次切換頁面，在之后的頁面中觸發
（3）onReady：頁面被首次切換到（每個頁面只有一次）
（4）onHide：每次切換頁面，在之前的頁面中觸發
（5）onUnload：關閉當前頁
wx.setNavigationBarTitle({
title: '這是NavigationBarTitle',
})wx.navigateBack(); //返回上一頁
wx.navigateBack({ //返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁。
delta: 2
})<button open-type="share" plain="true" style='border:none'>轉發</button>
onShareAppMessage: function() {
return {
title: '標題',
path: '/zh_tcwq/pages/index/index',//打開的頁面路徑
success: function (res) {
// 轉發成功
},
fail: function (res) {
// 轉發失敗
}
}
}// 撥打電話
call_phone: function () {
var that = this
wx.makePhoneCall({
phoneNumber: that.data.dianhua//電話號碼
})
},在小程序的里面，我們使用rpx來代替px，官方的定義如下：
rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
如果你使用的是<scroll-view>組件：他有一個事件叫做：bindscrolltolower，滾動到底部/右邊，會觸發 scrolltolower 事件。
// wxml
<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
// 你的代碼
</scroll-view>
// wxss
onScrollLower: function (event) {
var nextUrl = this.data.requestUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl, this.processDoubanData)
wx.showNavigationBarLoading()
},如果你使用<view>，你就不需要在元素里面綁定任何事件，直接在js文件里面申明：
onReachBottom: function (event) {
var nextUrl = this.data.requestUrl +
"?start=" + this.data.totalCount + "&count=20"; // 請求借口，加載數據，并更新數據
util.http(nextUrl, this.processDoubanData);
wx.showNavigationBarLoading(); // 顯示loading
},在你需要的進行下拉刷新的頁面的json文件里面：
{
"enablePullDownRefresh": true
}然后在js中，進行相應的數據操作：
onPullDownRefresh: function (event) {
var refreshUrl = this.data.requestUrl +
"?start=0&count=20";
this.data.movies = {};
this.data.isEmpty = true;
this.data.totalCount = 0;
util.http(refreshUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},讀到這里，這篇“微信小程序常用功能有哪些及怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
