摘要:事件與自定義屬性頁面跳轉(zhuǎn)參數(shù)傳遞與接收頁面跳轉(zhuǎn)的五種方式頁面間參數(shù)傳遞與接收方法帶參數(shù)發(fā)送方發(fā)送參數(shù),帶參數(shù)模式發(fā)送評(píng)接收方接收參數(shù),通過生命周期函數(shù)中的參數(shù)獲取參數(shù)頁面間參數(shù)傳遞與接收方法全局參數(shù)發(fā)送方接收方頁面間參數(shù)
事件與自定義屬性 頁面跳轉(zhuǎn)、參數(shù)傳遞與接收
頁面跳轉(zhuǎn)的五種方式
1、wx.navigateTo(obj) 2、wx.redirectTo(obj) 3、wx.switchTab(obj) 4、wx.navigateBack(obj) 5、wx.reLaunch(obj)
頁面間參數(shù)傳遞與接收----方法1:url帶參數(shù)
//發(fā)送方:發(fā)送參數(shù),url帶參數(shù)模式發(fā)送評(píng)19
//接收方:接收參數(shù),通過onLoad生命周期函數(shù)中的option參數(shù)獲取參數(shù) Page({ onLoad: function(options) { var duanziId = options.id } })
頁面間參數(shù)傳遞與接收----方法2:全局參數(shù)
//發(fā)送方 var appInstance = getApp(); apppInstance.pageParams.xxx = val;
//接收方 apppInstance.pageParams.xxx;
頁面間參數(shù)傳遞與接收----方法3:緩存
自適應(yīng)與新單位 新布局:彈性盒模型下列是微信小程序中組件的類型
inline:、
什么是彈性盒模型?
Flex 布局語法教程
容器屬性(display:flex)
flex-direction flex-wrap flex-flow justify-content align-items align-content
容器內(nèi)元素屬性
order flex-grow flex-shrink flex-basis flex align-selfTemplate模板引擎
模板定義
模板使用
1、導(dǎo)入模板wxml文件:2、導(dǎo)入模板wxss文件:@import "../../template/movie-list/movie-list-tpl.wxss"; 3、使用模板: 注意:data中...有含義,在模板文件中直接調(diào)用item下的屬性
模板中嵌套模板
數(shù)據(jù)綁定{{title}} 更多
模板
頁面JS
this.setData({});
注意事項(xiàng)
如果是在異步方法調(diào)用時(shí)才進(jìn)行數(shù)據(jù)綁定,由于時(shí)機(jī)不可控必須在頁面的data:{}中先定義數(shù)據(jù),否則出錯(cuò)數(shù)據(jù)緩存
限制:每個(gè)小程序上限10M
特點(diǎn):永久存儲(chǔ)/同步與異步2種方式/不建議將關(guān)鍵信息存儲(chǔ)
頁面與APP生命周期 路徑問題絕對(duì)路徑(推薦)
相對(duì)路徑(相對(duì)當(dāng)前文件所在位置)
var util = require("../../utils/util.js");配置
全局配置(app.json)
可配置五項(xiàng):pages/window/tabBar/networkTimeout/debug
局部配置(每個(gè)頁面對(duì)應(yīng)的json文件)
只可配置一項(xiàng):window引用
引用wxml文件
1、import2、include
引用wxss文件
@import "common.wxss"; //支持相對(duì)路徑
引用js文件
1、var common = require("common.js"); //require暫時(shí)只支持相對(duì)路徑 2、import {Person} from "./person.js"; //es6提供的加載模塊功能下拉刷新、上拉加載
實(shí)現(xiàn)方法2種
1、使用組件
2、使用Page中的onPullDownRefresh()與onReachBottom()回調(diào)方法【推薦】
方法2
##前期準(zhǔn)備 在配置文件JSON中,必須開啟 "enablePullDownRefresh": true ##分別實(shí)現(xiàn)2個(gè)回調(diào)方法 onPullDownRefresh()與onReachBottom()Q&A
this.data.xxx與this.setData()的區(qū)別
動(dòng)態(tài)新增/修改數(shù)據(jù)綁定: this.data.xxx 已經(jīng)不能使用 只能使用 this.setData()
異步與同步的區(qū)別
異步中的代碼無法確定執(zhí)行時(shí)機(jī),而同步可以 1、異步代碼易讀性差 2、異步難調(diào)試 3、異步不阻塞 4、異步控制執(zhí)行時(shí)機(jī)差,很難控制 5、同步會(huì)阻塞(推薦同步,異步要根據(jù)業(yè)務(wù)來決定)
異步調(diào)用如何獲取數(shù)據(jù)
注意:異步調(diào)用方式不能使用同步獲取數(shù)據(jù),否則獲取不到 解決方案:使用回調(diào)函數(shù)來獲取變量 Page({ getBannerDate:function(id,callBack){ wx.require({ url:"", success:callBack }); }, callBack: function(res){ } }); ##ES6提供了一種簡(jiǎn)化方式(箭頭函數(shù)),無須定義多個(gè)回調(diào)函數(shù) Page({ getBannerDate:function(id,(res)=>{ }){ wx.require({ url:"", success:callBack }); } });
如何動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題
##必須在onReady生命周期方法中調(diào)用wx.setNavigationBarTitle()方法 wx.setNavigationBarTitle({ title: "當(dāng)前頁面" });
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83841.html
awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫集合。我們會(huì)定期同步上的項(xiàng)目到這里,也歡迎各位 UI組件開發(fā)框架實(shí)用庫開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫wx-charts ★449 - 微信小程...
摘要:微信小程序應(yīng)用號(hào)開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個(gè)微信小程序開始小程序開發(fā)文檔小程序設(shè)計(jì)指南工具小程序開發(fā)者工具官方支持微信小程序?qū)崟r(shí)預(yù)覽的支持的微信小程序組件化開發(fā)框架轉(zhuǎn)在線工具小程序云端增強(qiáng)社區(qū)微信小程序 微信(小程序or應(yīng)用號(hào))開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個(gè)微信小程序開始 小程序開發(fā)文檔 小程序設(shè)計(jì)指南 工具 小程序開發(fā)者...
摘要:微信應(yīng)用號(hào)小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源,方便查閱和學(xué)習(xí),歡迎大家提交新的資源,完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號(hào)(小程序)資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源,方便查閱和學(xué)習(xí),歡迎大家提交新的資源,完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要:微信應(yīng)用號(hào)小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源,方便查閱和學(xué)習(xí),歡迎大家提交新的資源,完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號(hào)(小程序)資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源,方便查閱和學(xué)習(xí),歡迎大家提交新的資源,完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...
閱讀 1273·2021-11-24 09:39
閱讀 1526·2021-09-07 09:59
閱讀 3484·2019-08-30 15:54
閱讀 2481·2019-08-30 11:00
閱讀 2675·2019-08-29 15:06
閱讀 2165·2019-08-26 13:52
閱讀 436·2019-08-26 13:24
閱讀 2501·2019-08-26 12:20