柚子快報激活碼778899分享：【微信小程序】開發(fā)環(huán)境配置

http://yzkb.51969.com/

目錄

小程序的標(biāo)準(zhǔn)開發(fā)模式：

注冊小程序的開發(fā)賬號

安裝開發(fā)者工具

下載

設(shè)置外觀和代理

第一個小程序 -- 創(chuàng)建小程序項目?

查看項目效果?

第一種：在模擬器上查看項目效果?

項目的基本組成結(jié)構(gòu)

小程序代碼的構(gòu)成

app.json文件

project.config.json 文件

sitemap.json文件

頁面的 .json 配置文件

新建小程序頁面

修改項目首頁?

WXML模板

WXSS樣式

JS邏輯交互

宿主環(huán)境

什么是宿主環(huán)境

小程序宿主環(huán)境包含的內(nèi)容

1.通信的主體

運行機(jī)制?

小程序的啟動過程

頁面渲染過程

小程序的標(biāo)準(zhǔn)開發(fā)模式：

申請小程序開發(fā)賬號安裝小程序開發(fā)者工具創(chuàng)建和配置小程序項目

注冊小程序的開發(fā)賬號

訪問下述網(wǎng)址

微信公眾平臺 (qq.com)https://mp.weixin.qq.com/點擊右上角的 立即注冊

選擇賬戶類型? -小程序

填寫個人信息

進(jìn)入郵箱 激活賬號以后，即可開始。

獲取小程序AppID

在小程序開發(fā)后臺，選擇開發(fā)設(shè)置

創(chuàng)建小程序項目的時候，需要要到類似下面這種AppID

安裝開發(fā)者工具

微信開發(fā)者工具是官方推薦使用的小程序開發(fā)工具，他提供的主要功能如下：

快速創(chuàng)建小程序項目代碼的查看和編輯對小程序功能進(jìn)行調(diào)試小程序的預(yù)覽和發(fā)布?

下載

下載頁面的鏈接如下：

下載 / 穩(wěn)定版更新日志 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html選擇下載版本

運行exe文件，完成安裝

?安裝完成后，打開開發(fā)者工具，如上所示，使用微信掃碼登錄

設(shè)置外觀和代理

選擇右上角設(shè)置

選擇外觀

第一個小程序 -- 創(chuàng)建小程序項目?

點擊 “+” 按鈕?

填寫AppID

后端服務(wù)選擇 “不使用云服務(wù)”

模板使用js

查看項目效果?

查看項目效果有兩種方法

第一種：在模擬器上查看項目效果?

點擊編譯按鈕后，左側(cè)會顯示最新的項目效果

第二種：點擊 預(yù)覽 按鈕?，手機(jī)掃碼查看項目效果

項目的基本組成結(jié)構(gòu)

pages 用來存放所有小程序的頁面

utils 用來存放工具性質(zhì)的模塊（例如：格式化時間）

app.js 小程序項目的入口文件

app.json 小程序項目的全局配置文件

app.wxss 小程序項目的全局樣式文件

project.config.json 項目的配置文件

sitemap.json 用來配置小程序及其頁面是否允許被微信索引

官方建議把所有小程序的頁面，都存放在pages目錄中，以單獨的文件夾存在：

其中，每個頁面由4個基本文件組成，他們分別是：

.js 文件（頁面的腳本文件，存放頁面的數(shù)據(jù)、事件處理函數(shù)等）.json 文件（當(dāng)前頁面的配置文件，配置窗口的外觀、表現(xiàn)等）.wxml 文件（頁面的模板結(jié)構(gòu)文件）.wxss 文件（當(dāng)前頁面的樣式表文件）

小程序代碼的構(gòu)成

JSON配置文件的作用

在小程序項目中，通過不同的.json配置文件，可以對小程序項目進(jìn)行不同級別的配置

小程序項目中有4種json配置文件：

項目根目錄中的 app.json 配置文件項目根目錄中的 project.config.json 配置文件項目根目錄中的 sitemap.json 配置文件每個頁面文件夾中的 .json 配置文件

app.json文件

這四個配置項的作用：

pages：用來記錄當(dāng)前?小程序所有頁面的路徑window：全局定義小程序所有頁面的背景色、文字顏色等style：全局定義小程序組件所使用的樣式版本sitemapLocation：用來指明sitemap.json 的位置

project.config.json 文件

project.config.json是項目配置文件，用來記錄我們對小程序開發(fā)工具所做的個性化配置，例如：

setting中保存編譯相關(guān)的配置projectname 中保存的是項目名稱appid 中保存的是小程序的賬號ID

sitemap.json文件

微信現(xiàn)已開發(fā)小程序內(nèi)搜索，效果類似于PC網(wǎng)頁 的SEO，sitemap.json 文件用來配置小程序頁面是否允許微信索引

allow 允許微信索引disallow 不允許微信索引?

頁面的 .json 配置文件

小程序中的每一個頁面，可以使用 .json 文件來對本頁面的窗口外觀進(jìn)行配置，頁面中的配置項會覆蓋app.json 的window中相同的配置項

新建小程序頁面

只需要在app.json ->pages 中新增頁面的存放路徑，小程序開發(fā)者工具即可幫助我們自動創(chuàng)建對應(yīng)的頁面文件

修改項目首頁?

只需要調(diào)整 app.json ->pages 數(shù)組中頁面路徑的前后順序，即可修改項目的首頁，小程序會把排在第一位的頁面當(dāng)作項目首頁進(jìn)行渲染?

WXML模板

什么是WXML，是小程序框架設(shè)計的一套標(biāo)簽語言，用來構(gòu)建小程序頁面的結(jié)構(gòu)，其作用類似于網(wǎng)頁開發(fā)中的HTML

WXSS樣式

什么是WXSS，WXSS是一套樣式語言，用于描述WXML的組件樣式，類似于網(wǎng)頁開發(fā)中的CSS

JS邏輯交互

?小程序中 .js 文件的分類

小程序中的 JS 文件分為三大類，分別是：

app.js

是整個小程序項目的入口文件，通過調(diào)用App()函數(shù)來啟動整個小程序

頁面的 .js 文件

是頁面的入口文件，通過調(diào)用Page() 函數(shù)來創(chuàng)建并運行頁面

普通的 .js 文件

是普通的功能模塊文件，用來封裝公共的函數(shù)或?qū)傩怨╉撁媸褂?/p>

宿主環(huán)境

什么是宿主環(huán)境

宿主環(huán)境指的是程序運行所必須依賴的環(huán)境，例如Android系統(tǒng)和IOS系統(tǒng)是兩個不同的宿主環(huán)境

小程序宿主環(huán)境包含的內(nèi)容

通信模型運行機(jī)制組件API

1.通信的主體

小程序中通信的主題是渲染層和邏輯層，其中

WXML模板和WXSS樣式工作在渲染層JS腳本工作在邏輯層

運行機(jī)制?

小程序的啟動過程

把小程序的代碼包下載到本地解析app.json 全局配置文件執(zhí)行app.js 小程序入口文件，調(diào)用App()創(chuàng)建小程序?qū)嵗秩拘〕绦蚴醉撔〕绦騿油瓿?/p>

頁面渲染過程

加載解析頁面的 .json 配置文件?加載頁面的 .wxml模板和 .wxss 樣式執(zhí)行頁面的 .js 文件，調(diào)用Page()創(chuàng)建頁面實例頁面渲染完成

柚子快報激活碼778899分享：【微信小程序】開發(fā)環(huán)境配置

http://yzkb.51969.com/

精彩內(nèi)容