1.小程序的開發(fā)準備

1.1小程序的安裝與創(chuàng)建

1.1.1 生產(chǎn)appid

前往小程序官網(wǎng)，注冊（不贅述了）；登錄上去之后，需要獲得小程序的appid

由于后期調(diào)?微信?程序的接?等功能，需要索取開發(fā)者的?程序中的 APPID ，所以在注冊成功后， 可登錄，然后獲取APPID。
登錄成功后可看到如下界? 然后復制你的APPID,保存起來

1.1.2 下載安裝微信開發(fā)者工具

如圖，下載安裝微信開發(fā)者工具

1.1.3 新建小程序項目

打開微信小程序，新建項目，粘貼上述的appid，選擇不使用云開發(fā)，JavaScript

點擊確定

如此我們就新建好了一個小程序的項目。

2.微信小程序與普通web開發(fā)的區(qū)別

2.1 運行機制不同

2.2 面對的開發(fā)環(huán)境不同

由于運行環(huán)境的不同，所以小程序中， 無法調(diào)用 DOM 和 BOM 的 API。 但是，小程序中可以調(diào)用微信環(huán)境提供 的各種 API，例如： 1.地理定位；2. 掃碼；3. 支付等…

2.3 開發(fā)過程

3.認識微信小程序

3.1 微信開發(fā)者工具

微信開發(fā)者工具由五個功能區(qū)組成

3.2 小程序項目結(jié)構(gòu)

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

3.2.2 小程序頁面組成

小程序官方建議把所有的小程序頁面部分都放在pages文件夾當中，以單獨的文件夾形式存在。每個頁面由四個文件組成。

3.3 json配置文件

json配置文件的作用:

JSON (JavaScript Object Notation)是一種數(shù)據(jù)格式，在實際開發(fā)中，JSON 總是以配置文件的形式出現(xiàn)。小程序項目中也不例外：通過不同 的 .json 配置文件，可以對小程序項目進行不同級別的配置。

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

3.3.1 app.json配置文件

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現(xiàn)、底部 tab 等。

以我們當前新建的項目為例

3.3.2 project.config.json文件

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

3.3.3 sitemap.json文件

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

當開發(fā)者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內(nèi)容建立索引。當用戶的搜索關(guān)鍵字和頁面的索引匹配成功的時候，小程序的頁面將可能展示在搜索結(jié)果中。

注意：sitemap 的索引提示是默認開啟的，如需要關(guān)閉 sitemap 的索引提示，可在配置文件 sitemap.json當中修改action字段為disallow。

3.3.4 頁面的json配置文件

小程序的每一個頁面，都可以使用json文件來對本頁面的窗口外觀進行配置，頁面中的配置項會覆蓋app.json的wiondow當中的同名配置項。

注意: json文件當中不能寫任何的注釋。

3.4 新建小程序頁面

只需要在app.json -> pages屬性下新增頁面的路徑，小程序開發(fā)者工具會自動幫我們創(chuàng)建對應的頁面文件。

不再需要我們手動創(chuàng)建頁面文件，很舒服哦。

3.4.1 修改小程序項目首頁

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

3.5 wxml模板

3.5.1 什么是wxml

wxml(weixin markup language）是微信小程序設(shè)計的一套標簽語言，用來構(gòu)建小程序頁面的結(jié)構(gòu)，類似web端的html。

3.5.2 html和wxml的區(qū)別

• 標簽名稱不同

  <div></div>
  <span></span>
  <img>
  <a></a>
  

  <view></view>
  <text></text>
  <image>
  <navigator></navigator>    
  

• 屬性節(jié)點不同

  <a href="https://www.baidu.com">跳轉(zhuǎn)百度</a>
  

  <navigator url="/pages/home/home"></navigator>
  

• 提供的類似vue當中的模板語法
  1.數(shù)據(jù)綁定
  2.列表渲染
  3.條件渲染

3.6 wxss樣式

3.6.1什么是wxss？

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

3.6.2 wxss和css的區(qū)別

• 新增了rpx單位，css種需要自己進行相對單位的計算如px -> rem;wxss在底層支持rpx，會根據(jù)不同設(shè)備尺寸進行自動換算。
• 提供了全局樣式和局部樣式
  • 項目根目錄當中的app.wxss會作用于所有小程序頁面
  • 局部頁面的.wxss文件則只對當前頁面生效
• wxss僅支持部分css選擇器
  • .class和#id(類名和id選擇器)
  • element(元素選擇器)
  • 并集選擇器，后代選擇器
  • ::after和::before這倆偽元素選擇器(只支持這倆個)
  • :first-child和last-child偽類選擇器(只支持這倆)

3.7 JavaScript邏輯交互

3.7.1 小程序當中的.js文件

一個項目僅僅提供界面展示是不夠的，在小程序中，我們通過 .js 文件來處理用戶的操作。例如：響應用戶的 點擊、獲取用戶的位置等等。

3.7.1.1 小程序js文件分類

    |

| ------------- | ------------------------------------------------------------ |
| app.js | 整個小程序項目的入口文件，通過調(diào)用App()函數(shù)來啟動整個小程序 |
| 頁面的.js文件 | 頁面的入口文件，通過調(diào)用Page()函數(shù)來創(chuàng)建并運行頁面 |
| 普通的.js文件 | 是普通的功能模塊文件，用來封裝公共工具函數(shù)或者屬性供頁面使用 |

文章來源地址http://www.zghlxwxcb.cn/news/detail-659149.html

到了這里，關(guān)于微信小程序(一)小程序與web開發(fā)的區(qū)別&創(chuàng)建新項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！