詳解微信小程序開(kāi)發(fā)(項(xiàng)目從零開(kāi)始)
一、序
微信小程序,估計(jì)大家都不陌生,現(xiàn)在應(yīng)用場(chǎng)景特別多。今天就系統(tǒng)的介紹一下小程序開(kāi)發(fā)。注意,這里只從項(xiàng)目代碼上做解析,不涉及小程序如何申請(qǐng)、打包、發(fā)布的東西。(這些跟著微信官方文檔的流程走就好)。好了廢話不多說(shuō),看目錄。
注: 小程序是一套特殊的東西,融合了原生和web端。他是一個(gè)不完整的瀏覽器對(duì)象,所以很多DOM 、 BOM 的東西無(wú)法使用,但是他又通過(guò)微信APP實(shí)現(xiàn)了多線程。
二、如何創(chuàng)建小程序
很簡(jiǎn)單,首先下載微信開(kāi)發(fā)者工具,下載穩(wěn)定版本的就好。 下載 然后,創(chuàng)建小程序,可以參考下述圖片:
注意正式的小程序需要審批,拿到正式的APPID,我們測(cè)試的或者暫時(shí)沒(méi)有的可點(diǎn)那個(gè)測(cè)試的appid,小程序模板選擇默認(rèn)就好。按照這樣的流程走完,我們就創(chuàng)建完一個(gè)小程序了。
三、webstrom支持小程序開(kāi)發(fā)
創(chuàng)建完小程序之后,我們先不著急開(kāi)發(fā)。工欲善其事必先利其器,微信開(kāi)發(fā)者工具有點(diǎn)卡,而且功能少,開(kāi)發(fā)效率很低。所以我們還是改造自己的編譯器,這里只介紹2種方法。一是 hbuilderX,他有支持小程序的模塊,很小巧的一款編譯器; 二是 webstorm,我用的他,在這介紹一下配置的方法,其他的大家自行g(shù)oogle吧。
1、支持wxml和wxss的文件類型,有語(yǔ)法高亮。 打開(kāi)webstorm編譯器,依次點(diǎn)擊 文件 -- 設(shè)置 -- 編輯器 -- 文件類型 , 找到 html文件,添加 *.wxml; 找到Cascading style Sheet ,添加 *.wxss。就OK了
2、支持小程序代碼提醒。 下載 這個(gè)文件,然后,把他放到一個(gè)顯眼的地方; 然后, webstorm 點(diǎn)擊 文件 -- 導(dǎo)入設(shè)置 ,找到這個(gè)下載的文件,點(diǎn)擊確定即可。
以上就是webstorm支持小程序語(yǔ)法的操作。
四、基礎(chǔ)文件目錄詳解
然后解釋一下小程序的目錄結(jié)構(gòu)。
project.config.json: 小程序的配置文件,包含項(xiàng)目打包配置、上傳代碼自動(dòng)壓縮等等,是一些開(kāi)發(fā)、打包之類的配置。
app.json: 當(dāng)前項(xiàng)目的配置文件。包括項(xiàng)目的頁(yè)面引入、導(dǎo)航條顏色、導(dǎo)航條標(biāo)題 等等,是項(xiàng)目具體到代碼開(kāi)發(fā)上的配置。介紹幾個(gè)配置:
pages: 包含的頁(yè)面。每次新增頁(yè)面都得在這里引入,否則新頁(yè)面的json配置等無(wú)法生效。 注意pages中頁(yè)面先寫的先渲染,所以數(shù)組第一條也就是我們的首頁(yè)。
window: 配置所有頁(yè)面導(dǎo)航條字體、顏色、背景色等
app.js: 小程序入口文件。生成小程序?qū)嵗?,App({}), 通常在這獲取用戶信息、授權(quán)信息、定義全局變量等。
app.wxss: 小程序全局 style 文件。對(duì)整個(gè)項(xiàng)目頁(yè)面生效。通常規(guī)定項(xiàng)目的 字體、基礎(chǔ)顏色,定義一些公共樣式。
utils: 工具函數(shù)目錄。通常用來(lái)放一些公共的js方法。比如封裝的request請(qǐng)求,一些別的處理數(shù)據(jù)什么的方法。
pages: 小程序的頁(yè)面目錄。所有的小程序頁(yè)面,都寫在這里面。
五、完善項(xiàng)目目錄
上邊大致解釋了一下小程序的基礎(chǔ)文件,現(xiàn)在按照常見(jiàn)的規(guī)范完善一下項(xiàng)目目錄,這里面包含一些個(gè)人見(jiàn)解,有需要的參考即可。先看一下結(jié)果:
現(xiàn)在解釋一下這些目錄:
components: 我們封裝的小程序可復(fù)用組件。
constants: 一些項(xiàng)目中的常亮。
image: 用到的圖片。
services: 用到的所有接口目錄
大致就新建了這幾個(gè),如果有別的需求,根據(jù)自己的情況增加。
六、基礎(chǔ)語(yǔ)法詳解
現(xiàn)在大致解釋一下小程序的語(yǔ)法。首先, 創(chuàng)建新頁(yè)面,默認(rèn)都創(chuàng)建 *.wxml *.wxss *.js *.json 和我們平時(shí)寫的代碼差不多,都是html js css,多了個(gè)json配置文件
*.json:常用的屬性有2大塊,navigationBarTitleText 相關(guān)的設(shè)置頂部標(biāo)題的,usingComponents 引用的組件
*.js:getApp() 獲取小程序?qū)嵗?,拿全局變量等?Page({}) 創(chuàng)建頁(yè)面; data 當(dāng)前頁(yè)面的變量;onLoad 生命周期,頁(yè)面加載完畢。
*.wxml:注意,小程序支持的標(biāo)簽很少,像 span 是支持的,div不支持,一般用view代替塊級(jí),span、text 代替行級(jí)。
*.wxss:大部分css選擇器不支持,支持的好像才5個(gè),想支持less等得自己配置
// json文件 { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText":"我的", "usingComponents": { "menu": "/components/menu/index" } } // js文件 const app = getApp() Page({ data: {}, onLoad: function () {}, })
七、實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
和通常的web開(kāi)發(fā)一樣,小程序頁(yè)面跳轉(zhuǎn)頁(yè)分2中,wxml中的vavigator標(biāo)簽,以及js的navigator相關(guān)的api。路由跳轉(zhuǎn)的方法有好幾個(gè),這里不一一贅述了,常用的直接跳轉(zhuǎn)
wx.navigateTo,重定向 wx.redirectTo等等,具體的請(qǐng)看官方文檔。這里強(qiáng)調(diào)一下路由傳參,很簡(jiǎn)單:
1、少量數(shù)據(jù)。直接問(wèn)號(hào)傳參。然后在目標(biāo)頁(yè)面的onLoad方法中通過(guò)options參數(shù)接收。
2、大量數(shù)據(jù)。直接塞到全局變量里面。
// wxml跳轉(zhuǎn)頁(yè)面 <navigator url="/pages/my{{item.path}}" class="navigator"> <image class="imgIcon" src="{{item.icon}}"></image> <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view> </navigator> //js跳轉(zhuǎn)頁(yè)面 wx.navigateTo({ url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}` }) //路由傳參如何接收 onLoad: function (options) { console.log(options) },
八、wx.request 的封裝
在utils中新建request.js,簡(jiǎn)單封裝了一下,一些數(shù)據(jù)要全局配置的都引進(jìn)來(lái),然后做了些錯(cuò)誤的統(tǒng)一處理,沒(méi)什么難度,不過(guò)要特別注意一下cookie的攜帶。具體代碼如下:
const app = getApp() export default function request(url, options = {}) { return new Promise(function (resolve, reject) { wx.request({ url: `${app.origin}${url}`, method: 'GET', ...options, data: options.data, header: { 'content-type': 'application/json', 'cookie': wx.getStorageSync("cookie") }, success: function (res) { //重新授權(quán)登錄 if (res.statusCode === 401){ wx.redirectTo({url: '/pages/login/index'}) return }else if (res.statusCode !== 200) { reject({ error: '服務(wù)器忙,請(qǐng)稍后重試', code: 500 }); return } else { if (url === '/api/cdz/user/weixin/login') { const cookie = res.header["set-cookie"] || res.header["Set-Cookie"]; if (cookie) wx.setStorageSync("cookie", cookie); } resolve(res.data); } }, fail: function (res) { // fail調(diào)用接口失敗 if (url === '/api/cdz/user/weixin/login') { const cookie = res.header["set-cookie"] || res.header["Set-Cookie"]; if (cookie) wx.setStorageSync("cookie", cookie); } reject({ error: '網(wǎng)絡(luò)錯(cuò)誤', code: 0 }); } }) }) }
然后我們使用的時(shí)候直接使用封裝好的request方法,這樣所有的api就封裝成一個(gè)個(gè)函數(shù)。我們?cè)陧?yè)面中直接import引入調(diào)用即可。
import request from "../utils/request"; import { stringify } from "../utils/util" export function testPost(data) { return request(`/api/test/post`, { method: 'PUT', data, }) } export function testGet(data) { return request(`/api/test/get`) }
九、使用 npm (引入 weui、moment等插件)
因?yàn)樾〕绦蚴褂玫氖遣煌暾臑g覽器對(duì)象,所以很多js包都是不好使的,比如jquery之類的。所以npm基本是廢了,能用的依賴包很少,具體哪些能用得自己發(fā)掘了。這里還是要介紹一下小程序如何使用npm,畢竟有些包還是要用的。
1、打開(kāi) 微信開(kāi)發(fā)者工具 -- 點(diǎn)擊 詳情 -- 勾選 使用npm模塊
2、打開(kāi)命令行,進(jìn)入項(xiàng)目的根目錄下, npm init 初始化npm
3、npm i 。。。安裝你需要的依賴
4、打開(kāi) 微信開(kāi)發(fā)者工具 -- 點(diǎn)擊 工具 -- 點(diǎn)擊 構(gòu)建npm。 此時(shí)小程序會(huì)將 node_modules 文件編譯打包,生成新目錄 miniprogram_npm ,
5、在需要用到的頁(yè)面的js文件中,const moment= require('moment') 引入,直接使用即可
6、最后記得忽略文件。新建 .gitignore 文件,node_modules 、 package_lock.json 等文件不需要上傳,最好只保留小程序的npm構(gòu)建包,用什么依賴也是的那個(gè)下載。這個(gè)到不是必須的
ps: 特殊注意一下weui的引入,這個(gè)ui庫(kù)是純css的,沒(méi)有js文件,所以他沒(méi)法用npm引入,而是直接下載文件,我直接丟到根目錄下,然后在 app.wxss 文件的開(kāi)頭引入
@import 'weui.wxss';,這樣使用的
十、封裝微信小程序可復(fù)用組件
現(xiàn)在篇幅有點(diǎn)太長(zhǎng)了,這個(gè)另寫一篇,有需要的可以去看。
十一、總結(jié)
以上就是我開(kāi)發(fā)小程序的一些經(jīng)驗(yàn)和總結(jié),希望能幫到你。另外,整套程序的骨架(業(yè)務(wù)代碼刪掉了)我會(huì)上傳到github,下載 有需要的可以去下載,記得點(diǎn)個(gè)贊,哈哈。
最后,我會(huì)另寫一篇博客,寫一下 如何封裝小程序 組件,并附上 我開(kāi)發(fā)小程序遇到的坑,以及對(duì)應(yīng)的解決方法。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
layUI使用layer.open,在content打開(kāi)數(shù)據(jù)表格,獲取值并返回的方法
今天小編就為大家分享一篇layUI使用layer.open,在content打開(kāi)數(shù)據(jù)表格,獲取值并返回的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js判斷價(jià)格,必須為數(shù)字且不能為負(fù)數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷價(jià)格,必須為數(shù)字且不能為負(fù)數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法
這篇文章主要介紹了JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法 的相關(guān)資料,需要的朋友可以參考下2016-06-06微信小程序入口場(chǎng)景的問(wèn)題集合與相關(guān)解決方法
這篇文章主要介紹了微信小程序入口場(chǎng)景的問(wèn)題集合與相關(guān)解決方法,從零開(kāi)始開(kāi)發(fā)一個(gè)小程序,大多數(shù)坑點(diǎn)都是在微信小程序的各個(gè)入口場(chǎng)景處。所以這里整理一下微信小程序的各個(gè)入口場(chǎng)景會(huì)面臨的問(wèn)題以及解決方案,需要的朋友可以參考下2019-06-06分享15個(gè)JavaScript的重要數(shù)組方法
這篇文章主要介紹了分享15個(gè)JavaScript的重要數(shù)組方法,數(shù)組方法的重要一點(diǎn)是有些是可變的,有些是不可變的。在決定針對(duì)特定問(wèn)題使用哪種方法時(shí),務(wù)必牢記,下文就來(lái)分享重要數(shù)組方法,需要的小伙伴可以參考一下2022-05-05JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實(shí)例【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實(shí)現(xiàn)點(diǎn)擊圖片及點(diǎn)擊左右按鈕滑動(dòng)切換的效果,涉及javascript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲完整實(shí)例
飛機(jī)大戰(zhàn)坦克是一款小游戲,相信很多朋友都有玩過(guò),由于最近在深入學(xué)習(xí)Javascript,所以想著用利用Javascript來(lái)實(shí)現(xiàn)這個(gè)游戲,下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲,需要的朋友可以參考下2017-01-01