摘要:框架這部分是小程序開發(fā)的核心,小程序采用視圖和邏輯層代碼相分離的結構,如果你用過這部分也不難理解,但是也有一些區(qū)別。工具這部分沒有什么好說的,微信開發(fā)開始還是用微信自己的開發(fā)工具比較方便。
小程序開發(fā)文檔使用說明
小程序的文檔分為 簡易教程、框架、組件、API?、工具
https://developers.weixin.qq....
簡易教程---介紹小程序開發(fā)的一些基本情況 開發(fā)方式,項目目錄等等,看完這些,基本能了解怎么跑起來項目,在哪塊寫代碼,各個文件的作用。
框架--- 這部分是小程序開發(fā)的核心,小程序采用視圖和邏輯層代碼相分離的結構,如果你用過vue angular react 這部分也不難理解,但是也有一些區(qū)別。
組件---小程序的每個標簽相當于一個組件,官方已經(jīng)預定義了一些常用的標簽組件,能夠滿足日常基本功能的使用,這部分分時小程序開發(fā)高效的一個原因,基礎的組件都定義好,需要用就行。這部分的文檔,只要過一下,大概有那些組件,用的時候再仔細閱讀文檔。
開發(fā)中常常使用的組件:
視圖容器 ? ?view ? ? ? scroll-view ?swiper
基礎內(nèi)容 ?text
媒體 ? ?image ?videoaudio
表單 ? button input checkbox ?label picker?
畫布 ?canvas?
地圖 ?map
API---主要,可以的調(diào)起微信提供的能力,如果你在前端開發(fā)中沒有遇到過的功能,都能在這里查到,比如小程序的頭部,頁面的刷新,本地存儲,獲取用戶信息,支付功能等。
工具--- 這部分沒有什么好說的,微信開發(fā)開始還是用微信自己的開發(fā)工具比較方便。
開發(fā)中常見問題 1.整個小程序的配置小程序的全局配置在 app.json 中,小程序每添加一個頁面,都要在全局中注冊,文檔:
https://developers.weixin.qq....
? ? 小程序的列表渲染和其他的前端模板語言相似,但可以用wx:for-item="itemname" 來指定每次循環(huán)對象的名字,可以用wx:for-index="indexname" 來指定 循環(huán)序列的鍵值,這個功能就是指定循環(huán)數(shù)組時的鍵和值的別名。
? ? 列表中的wx:key 是一個比較令人迷惑的地方 ,不寫會報錯,但是隨便給一個字符也不合理,最好是循環(huán)中的一個標記唯一性的鍵值,比如id
? 小程序的事件綁定,寫法上有些區(qū)別,主要2種 bind:youevent="eventhandle" ?catch:youevent="eventhandle" catch 能阻止事件冒泡
4.模塊開發(fā)小程序可以使用common.js 的模塊開發(fā)方式。moudle.exports /exports 導出模塊, require (‘file.js’) 的方式引入模塊
5.頁面的生命周期onLoad 生命周期函數(shù)--監(jiān)聽頁面加載(可以在這里異步的請求數(shù)據(jù),初始化頁面)
onReady 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成(在這里,可以獲取頁面視圖的布局數(shù)據(jù))
onShow 生命周期函數(shù)--監(jiān)聽頁面顯示
onHide 生命周期函數(shù)--監(jiān)聽頁面隱藏
onUnload 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?在小程序開發(fā)過程中肯定會遇到要獲取頁面中元素的位置和元素的寬高。這部分在 文檔=》api=》界面
wxml節(jié)點信息 中找相應的api
getRect: function(){ ? wx.createSelectorQuery().select("#the-id").boundingClientRect(function(rect){ ? ? rect.id // 節(jié)點的ID ? ? rect.dataset // 節(jié)點的dataset ? ? rect.left // 節(jié)點的左邊界坐標 ? ? rect.right // 節(jié)點的右邊界坐標 ? ? rect.top // 節(jié)點的上邊界坐標 ? ? rect.bottom // 節(jié)點的下邊界坐標 ? ? rect.width // 節(jié)點的寬度 ? ? rect.height // 節(jié)點的高度 ? }).exec() },7.交互反饋
交互反饋詳情在?文檔=》api=》界面=》交互反饋
一個成功的反饋
wx.showToast({ title: "成功", icon: "success", duration: 2000 })8.跨頁面更新數(shù)據(jù)
小程序整個應用是用App()構造方法組成,頁面是用Page() 構造方法注冊。小程序只有組件才有自定義事件,在Page() 無法使用自定義事件通過觸發(fā)事件在頁面間傳遞數(shù)據(jù)不可行,微信提供 獲取整個應用實例的getApp() 方法,這樣可以獲取app 的實例,通過 pages = getCurrentPages(); 獲取 打開頁面的 列表 ,通過 pages來調(diào)用各頁面的方法和更新數(shù)據(jù)
var pages = getCurrentPages();//獲取頁面棧 var currPage = pages[pages.length - 1]; //當前頁面 var prevPage = pages[pages.length - 2]; //上一個頁面 //直接調(diào)用上一個頁面的setData()方法,把數(shù)據(jù)存到上一個頁面中去 prevPage.setData({ mdata:1 }); //調(diào)用上一個頁面的方法來更新數(shù)據(jù) prePage.updatefunc(altdata)
?
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://systransis.cn/yun/96368.html
摘要:微信小程序應用號開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發(fā)文檔小程序設計指南工具小程序開發(fā)者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發(fā)框架轉在線工具小程序云端增強社區(qū)微信小程序 微信(小程序or應用號)開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發(fā)文檔 小程序設計指南 工具 小程序開發(fā)者...
摘要:官方資料微信公眾平臺注冊小程序。官網(wǎng)開發(fā)文檔社區(qū)開發(fā)工具部署微信小程序微信小程序本身不需要部署,在微信開發(fā)工具中直接上傳代碼就行。 為什么 學習 Java 三年,目前已經(jīng)工作了2年,因為自學,基礎差,所以打算年末總結一下常見的基礎知識和面試點; 也可以通過獨立做一個項目整合自己工作期間學習的知識,加深印象。 但是想著回家或是平時手機用的多,做一款APP和小程序很方便查看。 項目展示 本...
摘要:和都是輔助小程序開發(fā)的開源庫,本文對兩者做個對比。微信的這種限制決定了小程序一般只是用于實現(xiàn)核心功能,不會用作復雜功能。在筆者了解的很多小程序,甚至大都是用原生開發(fā)的。 grace和wepy都是輔助小程序開發(fā)的開源庫,本文對兩者做個對比。 注:本文是作者本人的一些拙見,純粹的技術討論,不想引起技術信仰之爭,歡迎積極、正向的討論及建議。 如果你還不了解Grace, 請參考:微信小程序開發(fā)...
摘要:由于個人技術水平有限,在問題描述,解決方案中存在的問題,希望可以得到各位前輩的指點。本篇主要是記錄我在開發(fā)微信小程序中遇到的問題。各記錄點排序,跟隨自己開發(fā)過程中的問題出現(xiàn)時間而定。。微信小程序數(shù)據(jù)頁面數(shù)據(jù)傳遞總結 由于個人技術水平有限,在問題描述,解決方案中存在的問題,希望可以得到各位前輩的指點。本篇主要是記錄我在開發(fā)微信小程序中遇到的問題。各記錄點排序,跟隨自己開發(fā)過程中的問題出現(xiàn)...
閱讀 2196·2021-11-19 09:55
閱讀 2661·2021-11-11 16:55
閱讀 3190·2021-09-28 09:36
閱讀 1958·2021-09-22 16:05
閱讀 3296·2019-08-30 15:53
閱讀 1818·2019-08-30 15:44
閱讀 2910·2019-08-29 13:10
閱讀 1354·2019-08-29 12:30