微信小程序中app.js文件、组件、api
app.js文件:
每個小程序都需要在app.js中調用 App 方法注冊小程序實例.
App({//App實例化,整個小程序只有一個App實例,全部頁面共享onLaunch: function () {//onLaunch小程序啟動之后觸發 },onShow: function () {//onShow小程序啟動,或從后臺進入前臺顯示時觸發 },onHide: function () {//onHide小程序從前臺進入后臺時觸發 },onError: function () {//onError小程序發生腳本錯誤或 API 調用報錯時觸發 },onPageNotFound: function () {//onPageNotFound小程序要打開的頁面不存在時觸發 },onUnhandledRejection: function () {//onUnhandledRejection小程序有未處理的 Promise 拒絕時觸發 },onThemeChange: function () {//onThemeChange系統切換主題時觸發 },//可自定義天劍任意類型函數或變量,用this可訪問,如:names:'jack'})頁面中的js文件:
對于小程序中的每個頁面,都需要在頁面對應的 js文件中使用page進行注冊頁面,指定頁面的初始數據、生命周期回調、事件處理函數等。
Page({//page為頁面構造器,生成一個頁面data: {//data定義初始化數據,會和wxml使用{{text}}渲染text: "hello"},options: {//options定義頁面的組件選項},onLoad: function() {// 頁面創建時執行},onShow: function() {// 頁面出現在前臺時執行},onReady: function() {// 頁面首次渲染完畢時執行},onHide: function() {// 頁面從前臺變為后臺時執行},onUnload: function() {// 頁面銷毀時執行},onPullDownRefresh: function() {// 觸發下拉刷新時執行},onReachBottom: function() {// 頁面觸底時執行(上拉)},onShareAppMessage: function () {// 頁面被用戶分享時執行},onShareTimeline: function () {// 頁面被用戶分享到朋友圈時執行},onAddToFavorites: function () {// 頁面被用戶收藏時執行},onPageScroll: function() {// 頁面滾動時執行},onResize: function() {// 頁面尺寸變化時執行},onTabItemTap(item) {// tab 點擊時執行console.log(item.index)console.log(item.pagePath)console.log(item.text)},// 事件響應函數(自定義函數名,如:viewTap)viewTap: function() {this.setData({//setData重新設置值text: 'word'}, function() {//重新賦值后執行的回調函數})},// 自由數據customData: {hi: 'MINA',lucky:'jack'}})behaviors:
behaviors 可以用來讓多個頁面有相同的數據字段和方法,如:
//behavior.js中:module.exports = Behavior({data: {sharedText: '頁面共用字段'},methods: {sharedMethod: function() {//共用方法}}})// page.js中:var myBehavior = require('./behavior.js')Page({behaviors: [myBehavior],//使用behaviors接收數據onLoad: function() {console.log(this.data.sharedText)//通過this拿到數據}})Component:
Component構造器可用于定義組件,調用 Component構造器時可以指定組件的屬性、數據、方法等,文檔推薦:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html,如:
Component({behaviors: [],// 屬性定義(詳情參見下文)properties: {myProperty: { // 屬性名type: String,value: ''},myProperty2: String // 簡化的定義方式},data: {}, // 私有數據,可用于模板渲染lifetimes: {// 生命周期函數,可以為函數,或一個在methods段中定義的方法名attached: function () { },moved: function () { },detached: function () { },},// 生命周期函數,可以為函數,或一個在methods段中定義的方法名attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋ready: function() { },pageLifetimes: {// 組件所在頁面的生命周期函數show: function () { },hide: function () { },resize: function () { },},methods: {onMyButtonTap: function(){this.setData({// 更新屬性和數據的方法與更新頁面數據的方法類似})},// 內部方法建議以下劃線開頭_myPrivateMethod: function(){// 這里將 data.A[0].B 設為 'myPrivateData'this.setData({'A[0].B': 'myPrivateData'})},_propertyChange: function(newVal, oldVal) {}}})組件:
小程序提供了豐富的組件給開發者,開發者可以組合各種組件合成自己的小程序。就像 HTML的div, p 等標簽一樣,如:
<map longitude="深圳經度" latitude="深圳緯度" bindmarkertap="點擊地圖時觸發的函數" style='width:200px;height:200px' class='mapbox'></map><!--map地圖組件,呈現一個地圖到頁面上,可添加屬性,如組件內-->更多組件文檔推薦:https://developers.weixin.qq.com/miniprogram/dev/component/
api:
為了讓開發者可以方便的調起微信提供的能力,例如獲取用戶信息、微信支付等,小程序提供了很多 API 給開發者去使用,如獲取地理信息:
wx.getLocation({type: 'wgs84',success: (res) => {var latitude = res.latitude // 緯度var longitude = res.longitude // 經度}})更多API推薦閱讀:https://developers.weixin.qq.com/miniprogram/dev/api/
提示:本文圖片等素材來源于網絡,若有侵權,請發郵件至郵箱:810665436@qq.com聯系筆者刪除。
筆者:苦海
總結
以上是生活随笔為你收集整理的微信小程序中app.js文件、组件、api的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python求第n个质数_找到第n个质数
- 下一篇: db2 删除索引_MYSQL进阶——索引