使用uni-app開發微信小程序流程

微信小程序註冊&開發&發佈流程(個人版)

1. 小程序註冊

在這裏插入圖片描述

  • 官網給出的發佈流程:

在這裏插入圖片描述

  • 註冊完成後應該可以看見自己的小程序id(本人由於原來賬號被凍結,所以將自己原來的小程序賬號找回後的操作)

    截圖如下:

在這裏插入圖片描述

2. 開發

2.1 開發及調試工具

2.2 開發步驟

2.2.1 新建項目

  1. 使用HBuilder創建項目,點擊文件—>新建—>項目,如圖:

在這裏插入圖片描述

  1. 在彈出的窗口選擇uni-app,填寫項目名稱和項目地址,然後我們可以根據需求選擇模板,這裏我選擇使用內置uni-ui的模板,如圖:

在這裏插入圖片描述

  1. 創建完成後的目錄如下:

    ┌─components            uni-app組件目錄
    │  └─comp-a.vue         可複用的a組件
    ├─hybrid                存放本地網頁的目錄,詳見
    ├─platforms             存放各平臺專用頁面的目錄,詳見
    ├─pages                 業務頁面文件存放的目錄
    │  ├─index
    │  │  └─index.vue       index頁面
    │  └─list
    │     └─list.vue        list頁面
    ├─static                存放應用引用靜態資源(如圖片、視頻等)的目錄,注意:靜態資源只能存放於此
    ├─wxcomponents          存放小程序組件的目錄,詳見
    ├─main.js               Vue初始化入口文件
    ├─App.vue               應用配置,用來配置App全局樣式以及監聽 應用生命週期
    ├─manifest.json         配置應用名稱、appid、logo、版本等打包信息,詳見
    └─pages.json            配置頁面路由、導航條、選項卡等頁面類信息,詳見
    

在這裏插入圖片描述

  1. 爲了方便我們在創建一個common目錄如圖,因爲我們使用的是uni-ui,所以必須要有uni-ui的樣式,這裏我已經將hello-uni-app官方演示案例下的common拿了過來,如下圖所示:

在這裏插入圖片描述

  1. 全局使用uni-ui的樣式,在App.vue中引入uni.css;

    @import "./common/uni.css";
    

在這裏插入圖片描述

此時,項目創建完成,現在我們就可以運行了,前提是必須安裝微信開發者工具,才能調試微信小程序

2.2.2 運行項目

  1. 選擇要運行的項目頁面,創建項目完成後,默認會生成index頁面,進入index頁面,Ctrl+R運行,彈出界面如下:

在這裏插入圖片描述
根據需求選擇點擊運行,

如果是小程序,則需要配置小程序的安裝路徑,確保能夠打開小程序開發者工具。

  1. 運行配置,主要配置開發工具的安裝路徑,確保能夠打開並調試程序,如圖:

在這裏插入圖片描述

點擊運行設置後,在彈出的頁面配置開發工具的安裝路徑,如圖:

在這裏插入圖片描述

  1. 執行步驟2,選擇微信開發者工具,在1或者2之間都可以選擇,選擇完成後會自動打開微信開發者工具,自動編譯運行,在HBuilder的控制檯會出現對應的控制檯窗口,如下圖:

在這裏插入圖片描述

在這裏插入圖片描述

2.2.3 優化調試

當存在多個頁面時,運行項目默認打開index頁面,我們可以自定義配置調試頁面。

我在pages目錄下新建了一個頁面page1,並且同事創建出了存放page1頁面的同名目錄,已經將page1註冊到了pages.json中。接下來就開始配置啓動頁,我們讓啓動頁爲剛創建的page1頁面。

"condition":{
		"current":1,
		"list":[
			{
				"name":"page1",
				"path":"pages/page1/page1"
			}
		]
	}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-w0R3CoQ0-1593593419644)(F:\WuDaInfo-Xian\學習筆記\images\2020-07-01_113356.png)]

保存,點擊控制檯的重新運行。

在這裏插入圖片描述

回到微信開發者工具,選擇指定的編譯頁面,這是就可以看見我們剛纔配置的名爲page1的頁面。

在這裏插入圖片描述

到這裏,開發流程基本結束。

備註:

  • 請求接口報錯,不在域名列表

    處理:在微信開發者工具—>詳情—>本地設置—>開啓本地不校驗合法域名,如下圖

在這裏插入圖片描述

3. 小程序發佈

3.1 將appID填入到使用uni-app開發的項目manifest.json中。

在這裏插入圖片描述

2020-06-22_115849.png

經過編譯後在微信小程序開發者工具可以看見小程序的基本信息,

在這裏插入圖片描述

3.2 上傳

在這裏插入圖片描述

上傳完成後,回到小程序管理後臺。在版本管理中可看見剛纔上傳的開發版本。

在這裏插入圖片描述

3.3 提交審覈

點擊提交審覈,然後填寫提交審覈表單,最後提交,完成後可在版本管理中看見審覈版本。

在這裏插入圖片描述

3.4 審覈完成後會自動生成線上版本

審覈完成後會自動生成線上版本,最後手動點擊發布,發佈完成後,可能有一些延遲,過10分鐘以後就可以在小程序中搜索到自己的小程序。

在這裏插入圖片描述

3. 小程序審覈不通過的原因

  1. 小程序服務類目所對應的頁面中的核心內容與該類目是否一致。
  2. 類目與頁面提供的內容是否一致。
  3. 小程序簡介沒有介紹小程序功能。
  4. 小程序提供的服務和內容必須是正式的,不能以測試內容提交,多次以測試內容提交。
  5. 部分圖片顯示被壓縮體檢不好。
  6. 搜索框及少數下才能選中,頁面評論點擊無響應,頁面圖片分辨率尺寸失真。
  7. 不得展示和推薦第三方小程序。比如:不能做小程序導航,不能做小程序鏈接互推,小程序排行榜等。
  8. 含有聲音視頻內容,沒有補充相關對應類目。
  9. 有賬號體系的小程序,除自有登錄方式,必須支持微信授權登錄。
  10. 必須保證用戶在該頁面能使用該服務類目,不得隱藏,不得進行多次跳轉。
  11. 首頁圖片與文字有互相重疊。
  12. 存在虛擬物品在線交易, ios系統需要走IAP,小程序暫不支付,請留意後續。
  13. 必須登錄才能使用的服務,請提供測試賬號。
  14. 小程序的頁面內容中,存在誘導類行爲,包括但不限於誘導分享、誘導添加、誘導關注公衆號、誘導下載等,要求用戶分享、添加、關注或下載後纔可操作的程序,
  15. 含有明示或暗示用戶分享的文案、圖片、按鈕、浮層、彈窗等的小程序,通過利益誘惑誘導用戶分享、傳播的小程序,用誇張言語來脅迫、引誘用戶分享的小程序,強制或誘導用戶添加小程序的,都將會被拒絕。

官方給出的常見拒絕情形

4. 附加

4.1 配置服務器域名

進入小程序後臺管理系統,點擊左邊的開發—>開發設置—>服務器域名,然後點擊修改,就可以配置,如圖:

在這裏插入圖片描述
新手一枚,不喜勿噴,如有錯誤,請留言指出
.---- -. -. . . .
( .’,----- - - ’ ’
_/ ;–:-\ --------------------
U__n^_’’[. |ooo__ | |!||!||!||!| |
c(_ …(_ …(_ …( /,] | |||||||| |
,
_
|,L______],|_____________________|
/;
(@)(@)==(@)(@) (o)(o) (o)(o)–(o)(o) **

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章