vue項目稍后再GitHub上進行更新，現(xiàn)在一起來學習小程序！！

一、微信小程序

1.微信公眾平臺

網(wǎng)址： https://mp.weixin.qq.com1.介紹微信公眾平臺，簡稱公眾號，是開發(fā)者通過公眾號為用戶提供咨詢和服務的平臺2.賬號分類(1)訂閱號訂閱號：為媒體和個人提供一種新的信息傳播方式，主要功能是在微信側給用戶傳達資訊；（功能類似報紙雜志，提供新聞信息或娛樂趣事）適用人群：個人、媒體、企業(yè)、政府或其他組織。群發(fā)次數(shù)：訂閱號（認證用戶、非認證用戶）1天內可群發(fā)1條消息。訂閱號所在位置： 微信好友對話列表中的訂閱號文件夾中，統(tǒng)一管理歡迎大家關注訂閱號：煙雨閣樓(2)服務號注意： 不支持個人開發(fā)服務號：為企業(yè)和組織提供更強大的業(yè)務服務與用戶管理能力，主要偏向服務類交互（功能類似12315，114，銀行，提供綁定信息，服務交互的）；適用人群：媒體、企業(yè)、政府或其他組織。群發(fā)次數(shù)：服務號1個月（按自然月）內可發(fā)送4條群發(fā)消息。(3)企業(yè)微信參考：釘釘為企業(yè)與組織提供專業(yè)的協(xié)作、管理和客戶運營工具。企業(yè)員工可以用認證的身份添加客戶微信，提供服務，實現(xiàn)交易。實現(xiàn)對內工作協(xié)同高效，對外連接12億微信用戶。(4)微信小程序小程序是一種新的開放能力，開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。類似app一樣的產(chǎn)品，嵌入微信內部的。偽app。

2.小程序優(yōu)缺點

1.優(yōu)點（1）不需要下載，即可使用，即用即走（2）上手容易，門檻較低(3) 流量較高 2.缺點(1)代碼包大小，有限制 ，一個包最大不能超過2M， 分包 （16M）(2)對個人開發(fā)者限制較大(3)審核限制較大，不能做到及時發(fā)布(4)不支持直接分享朋友圈（android支持 bate版本）

3.開發(fā)流程

? 注冊 – 信息完善 – 開發(fā) – 提交審核

3.1注冊

進入后臺--立即注冊--選擇賬號類型（小程序）--使用郵箱注冊，填寫密碼--進入自己的郵箱進行點擊鏈接進行激活--信息登記【個人-企業(yè)-政府-媒體-其他組織】填寫個人信息： 姓名-身份證號-手機號-微信掃碼

3.2填寫基本信息

1.名字、簡稱、頭像、介紹，個人賬號不能認證2.服務類目 ***小程序的賬號的種類選擇-- 餐飲--菜譜第一次進入小程序后臺，服務類目千萬不要選擇游戲

3.3管理

1.版本管理開發(fā)版本：小程序測試完畢，點擊微信開發(fā)者工具上傳按鈕，生成的版本審核版本：點擊開發(fā)版本后面的提交審核按鈕，生成的版本，次本版就是微信團隊正在審核的版本線上版本：當審核版本通過審核之后，點擊提交發(fā)布生成的版本，此版本是現(xiàn)在微信客戶端訪問的版本體驗版本：相當于測試版本，上線之前進行檢查體驗，點擊開發(fā)版本后面的選為體驗版本2.成員管理管理員:小程序擁有者項目成員：協(xié)同開發(fā)和管理小程序的體驗成員：專門體驗-體驗版本小程序的開發(fā)人員

3.4開發(fā)設置

1.appid/秘鑰（保存好）小程序的唯一標識2.服務器域名vue開發(fā)：前端axios請求地址（接口地址），解決跨域，建議使用后端解決跨域問題小程序：不存在跨域問題必須使用https請求，把服務器地址，存在在開發(fā)設置，服務器設置

4.微信開發(fā)者工具

4.1下載

開發(fā)文檔--工具--下載--穩(wěn)定版下載--安裝即可

4.2項目創(chuàng)建

1.創(chuàng)建空的文件夾，選擇路徑 2.填寫appid（可使用真實的或者測試的） 3.暫時不使用云開發(fā) 4.選擇js測試號與真實appid的區(qū)別：(1)云開發(fā)測試賬號不能使用(2)測試賬號不能發(fā)布上傳代碼

4.3工具使用

1.工具介紹菜單欄、工具欄、模擬器、目錄數(shù)據(jù)、編輯器、調試器注意：在工具欄詳情設置中，可以先把不檢驗合法域名勾選上

5.目錄結構

pagesindexindex.jsindex.jsonindex.wxmlindex.wxsslogslogs.jslogs.jsonlogs.wxmllogs.wxss unitlutils.js app.js app.json app.wxss project.config.json sitemap.json1.目錄結構(1)主體文件三個文件名稱不能改變，不能大寫app.js注冊小程序，入口文件app.json全局的配置文件app.wxss全局的樣式文件(2)頁面文件每一個頁面都有四個文件js、wxss、wxml、jsonjs： 當前頁面的邏輯文件wxss： 頁面的樣式文件 相當于cssjson： 頁面的配置wxml： 頁面的結構 ，相當于html2.系統(tǒng)生成的目錄pages： 頁面的目錄 (能夠更改)utils： 工具模塊project.config.json: 當前項目對當前編輯器的配置文件sitemap.json 站點地圖，配置文件比如index cart detail

6.自定義目錄結構

1.不能缺少app.json ,手動創(chuàng)建app.json 沒有被找到 2.app.json 文件內容報錯[ app.json.json 文件錯誤] app.json: Empty file is NOT a valid json file解決辦法;創(chuàng)建對象 3.pages不能為空[ app.json 文件內容錯誤] app.json: pages 不能為空pages是路徑列表--對比于vue中路由{"pages": ["a"]} 4.需要創(chuàng)建頁面（1）直接在pages字段上進行設置（2）先去創(chuàng)建文件夾，右鍵選擇新建page5.最后，把appjs進行創(chuàng)建即可

7.app.json全局配置文件 ***

7.1 entryPagePath

"entryPagePath": "pages/index/index",

7.2pages

注意事項：（1）未指定 entryPagePath 時，數(shù)組的第一項代表小程序的初始頁面（首頁）。（2）小程序中新增/減少頁面，都需要對 pages 數(shù)組進行修改。（3）每一項是以逗號分隔，但是最后一項不能加逗號（4) json配置文件中，不能加注釋（5）不能使用單引號，必須使用雙引號（6）pages中的元素，頁面路徑前面不能加任何的字符

7.3window設置

(1)navigationBar設置 頂部導航"window":{"navigationStyle": "default","navigationBarBackgroundColor": "#f00","navigationBarTitleText": "web濟南","navigationBarTextStyle": "black"}, (2)background 下拉之后產(chǎn)生的背景"enablePullDownRefresh": true, // 開啟下拉操作"backgroundColor": "#123456","backgroundTextStyle": "light"

7.4style

"style": "v2",//新版組件樣式v2版本button默認display: block;要設置寬高可更改為display: inline-block;背景色可正常設置。

7.5tabbar

注意事項：1.list是tab的列表，最多是5個，最少是2個，icon圖片不支持網(wǎng)絡圖片，大小限制40kb，尺寸是81 * 812.當position 為top時候，不顯示icon3.list中的pagepath路徑，一定是在pages字段中提前定義好 list：tab的列表選項"list":[{"text": "首頁","pagePath": "pages/index/index","iconPath": "tabs/index.png","selectedIconPath": "tabs/indexFull.png"},{"text": "購物車","pagePath": "pages/cart/cart","iconPath": "./tabs/cart.png","selectedIconPath": "./tabs/cartFull.png"},{"text": "我的","pagePath": "pages/my/my","iconPath": "./tabs/my.png","selectedIconPath": "./tabs/myFull.png"}] tab的其他配置選項： "tabbar":{"color": "#000","selectedColor": "#f00","backgroundColor":"#123456","borderStyle": "white","position": "bottom","custom": false, }

8.頁面的配置文件

每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現(xiàn)進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容為一個 JSON 對象 {"usingComponents": {},"navigationBarTitleText":"首頁","enablePullDownRefresh": true,"disableScroll":true }

9.sitemap.json

小程序根目錄下的 sitemap.json 文件用于配置小程序及其頁面是否允許被微信索引，文件內容為一個 JSON 對象，如果沒有 sitemap.json ，則默認為所有頁面都允許被索引； 1.pages/index/index 第一次2.params"params":["id",'name'],pages/index/index?id=XXX&name=XXX3.代碼是從上到下依次去匹配但是priority來改變規(guī)則匹配的優(yōu)先級 {"rules": [{"action": "allow","params": ["id","name"], // 路徑需要的參數(shù)"matching": "inclusive", // 匹配的形式，傳遞的參數(shù)包含 params中的參數(shù)即可命中"matching": "exact", // 傳遞的參數(shù)和params中需要的參數(shù)完全匹配，即可命中"matching": "exclusive", // 傳遞的參數(shù)與 params中的參數(shù)交集為空，即可命中"matching": "partial", // 傳遞的參數(shù)與 params中的參數(shù)交集不為空，即可命中"page": "pages/index/index"},{"action": "disallow","page": "*"}] } {"rules": [{"action": "disallow","params": ["id","name"],"matching": "inclusive","page":"pages/index/index"},{"action": "allow","params": ["id","name"],"matching": "inclusive","page": "pages/index/index","priority":2 // 規(guī)則匹配的優(yōu)先級，值越大，越先進行匹配},{"action": "disallow","page": "*"}] }

10.場景值

10.1.場景值的概念

? 用戶如何進入當前小程序的，即進入小程序的途徑

10.2應用場景

? kfc：

? 麥當勞：

? 正常點餐系統(tǒng)和外賣系統(tǒng)的區(qū)別

10.3應用

onLaunch(option){// 獲取場景值console.log(option)if(option.scene == 1011){console.log('掃描二維碼進入的')}else if(option.scene == 1001){console.log('發(fā)現(xiàn)欄主入口欄進入的')}else{console.log('其他形式進入的')} } onShow(option){if(option.scene == 1011){console.log('掃描二維碼進入的')}else if(option.scene == 1001){console.log('發(fā)現(xiàn)欄主入口欄進入的')}else{console.log('其他形式進入的')}}

總結

以上是生活随笔為你收集整理的小程序进阶学习01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。