天天看點

1.uniapp環境搭建

uniapp開發小程式

1.安裝hubilder和微信開發者工具。HBuilderX:官方IDE下載下傳位址  https://www.dcloud.io/hbuilderx.html,微信開發者工具下載下傳位址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.

建立uni-app

在點選工具欄裡的檔案 -> 建立 -> 項目:

1.uniapp環境搭建

3.選擇

uni-app

類型,輸入工程名,選擇項目存儲路徑,選擇模闆uni-ui項目,點選建立,即可成功建立。

1.uniapp環境搭建

4.運作uni-app

a.浏覽器運作:進入項目,點選工具欄的運作 -> 運作到浏覽器 -> 選擇浏覽器,即可在浏覽器裡面體驗uni-app 的 H5 版。

b.在微信開發者工具裡運作:

打開項目中的manifest.json檔案,選擇微信小程式配置,在微信公衆平台檢視appid,輸入到如下圖所示框内。

1.uniapp環境搭建

然後點選工具,選擇設定,運作配置,輸入web伺服器調用rul位址,冒号後面為端口号,選擇微信開發者工具路徑

(端口号在微信開發者工具裡檢視,點選設定,安全設定,開啟伺服器端口就可以看到端口号啦)

1.uniapp環境搭建

進入項目,點選工具欄的運作 -> 運作到小程式模拟器 -> 微信開發者工具,即可在微信開發者工具裡面體驗uni-app。

1.uniapp環境搭建

注意:以上是第一次使用,需要先配置小程式ide的相關路徑,才能運作成功。