微信小程序開(kāi)發(fā)指引

前言

本文檔我們主要關(guān)注微信小程序的開(kāi)發(fā)使用。微信小程序使用微信開(kāi)發(fā)者工具開(kāi)發(fā)，使用其專有語(yǔ)言WXML（WeiXin Markup Language是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言）、WXS（WeiXin Script是小程序的一套腳本語(yǔ)言），WXS結(jié)合 WXML可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。但為了降低開(kāi)發(fā)門(mén)檻，我們研究和使用了mpvue、taro、uni-app框架來(lái)開(kāi)發(fā)微信小程序。因mpvue不再維護(hù)，且存在較多問(wèn)題，放棄該框架，taro使用react、vue、Nerv開(kāi)發(fā)。最終我們暫時(shí)選擇了uni-app， uni-app是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。

了解微信小程序

官方主頁(yè)

微信掃描下方二維碼查看小程序示例（包括組件、拓展能力、接口、云開(kāi)發(fā)）

image

小程序開(kāi)發(fā)指南

首先應(yīng)了解小程序賬號(hào)申請(qǐng)、服務(wù)器配置、業(yè)務(wù)域名配置等點(diǎn)擊查看

任何一個(gè)普通的開(kāi)發(fā)者，經(jīng)過(guò)簡(jiǎn)單的學(xué)習(xí)和練習(xí)后，都可以輕松地完成一個(gè)小程序的開(kāi)發(fā)和發(fā)布，見(jiàn)小程序開(kāi)發(fā)指南

開(kāi)發(fā)工具

工具介紹
 微信開(kāi)發(fā)者工具下載及安裝

image

微信開(kāi)發(fā)者工具

框架

框架描述

項(xiàng)目文件描述

對(duì)于wxml和wxs語(yǔ)法我們只需簡(jiǎn)單了解就可以了，因?yàn)槲覀冏詈笫褂玫氖莢ue.js來(lái)開(kāi)發(fā)

一個(gè)小程序頁(yè)面由四個(gè)文件組成，分別是：

.json 后綴的 JSON 配置文件（頁(yè)面配置）
.wxml 后綴的 WXML 模板文件（頁(yè)面結(jié)構(gòu)）
.wxss 后綴的 WXSS 樣式文件（頁(yè)面樣式表）
.js 后綴的 JS 腳本邏輯文件（頁(yè)面邏輯）

主要配置示例

pages: 主包頁(yè)面路徑列表
subPackages: 分包結(jié)構(gòu)配置
window: 全局的默認(rèn)窗口表現(xiàn)
tabBar: 底部 tab 欄的表現(xiàn)
usingComponents: 導(dǎo)入三方組件

{
  "pages": [
    "pages/home/home",
    "pages/commodity/commodity",
    "pages/message/message",
    "pages/user/user"
  ],
  "subPackages": [
    {
      "root": "pages-home",
      "pages": [
        "community-detail/index",
        "comment-detail/index",
        "release-dynamic/index",
        "user-center/index",
        "webview/index"
      ]
    },
    {
      "root": "pages-commodity",
      "pages": [
        "detail/index",
        "pay-sure/index",
        "mall-comment/index",
        "mall-comment-detail/index"
      ]
    },
    {
      "root": "pages-message",
      "pages": [
        "system-message/index",
        "interactive-message/index",
        "detail/index"
      ]
    },
    {
      "root": "pages-user",
      "pages": [
        "login/login",
        "edit-user-info/index",
        "setting/index",
        "about/index",
        "user-services/index",
        "address/my-address/index",
        "address/add-address/index",
        "order/my-order/index",
        "order/order-detail/index",
        "order/logistics-detail/index",
        "order/release-comment/index"
      ]
    }
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
    "color": "#808080",
    "selectedColor": "#1A1A1A",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "height": "50px",
    "fontSize": "12px",
    "iconWidth": "20px",
    "spacing": "3px",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/images/home_normal.png",
        "selectedIconPath": "static/images/home_selected.png",
        "text": "發(fā)現(xiàn)"
      },
      {
        "pagePath": "pages/commodity/commodity",
        "iconPath": "static/images/store_normal.png",
        "selectedIconPath": "static/images/store_selected.png",
        "text": "商城"
      },
      {
        "pagePath": "pages/message/message",
        "iconPath": "static/images/message_normal.png",
        "selectedIconPath": "static/images/message_selected.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/images/user_normal.png",
        "selectedIconPath": "static/images/user_selected.png",
        "text": "我的"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "位置信息"
    }
  },
  "useExtendedLib": {
    "weui": true
  },
  "runmode": "liberate",
  "usingComponents": {
    "painter": "/wxcomponents/painter/painter",
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  },
  "sitemapLocation": "sitemap.json"
}

組件

詳細(xì)用法

結(jié)合小程序拓展組件庫(kù)使用相關(guān)小程序的原始組件,見(jiàn)下方拓展能力部分

API

詳細(xì)文檔

拓展能力

拓展組件
 拓展組件庫(kù)源碼
使用uni-app開(kāi)發(fā)微信小程序的時(shí)候，在pages.json文件的usingComponents中可以引用微信拓展組件, 如下引入方式，編譯時(shí)開(kāi)發(fā)工具將自動(dòng)編譯到項(xiàng)目中

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

調(diào)試

使用微信開(kāi)發(fā)者工具運(yùn)行、調(diào)試，與H5調(diào)試類似。開(kāi)發(fā)工具自帶模擬器，可以進(jìn)行真機(jī)調(diào)試，如果后臺(tái)服務(wù)使用本地ip，請(qǐng)打開(kāi)開(kāi)發(fā)工具，點(diǎn)擊右上角"詳情"->"本地設(shè)置"->"不校驗(yàn)合法域名..."，將其勾選。更多詳細(xì)內(nèi)容查看小程序調(diào)試

image

了解uni-app

官方主頁(yè)

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)

快速學(xué)習(xí)建議

不需要專門(mén)去學(xué)習(xí)小程序的語(yǔ)法，uni-app使用的是vue的語(yǔ)法，不是小程序自定義的語(yǔ)法
如果你還不會(huì)vue，先取官網(wǎng)學(xué)習(xí)使用vue

第一步，看完uni-app官網(wǎng)的首頁(yè)介紹。

第二步，通過(guò)快速上手，親身體驗(yàn)下uni-app。

第三步，看完《uni-app官方教程》，出品人：DCloud，課時(shí)：共3節(jié)。

快速開(kāi)始

uni-app支持通過(guò) 可視化界面、vue-cli命令行兩種方式快速創(chuàng)建項(xiàng)目。

可視化的方式

image

可視化的方式比較簡(jiǎn)單，HBuilderX內(nèi)置相關(guān)環(huán)境，開(kāi)箱即用，無(wú)需配置nodejs開(kāi)始之前，開(kāi)發(fā)者需先下載安裝如下工具
HBuilderX：官方IDE下載地址,下載App開(kāi)發(fā)版，可開(kāi)箱即用
創(chuàng)建uni-app、運(yùn)行uni-app、發(fā)布uni-app、發(fā)布為小程序
注意事項(xiàng)

在微信開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app。
如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運(yùn)行成功。如下圖，需在輸入框輸入微信開(kāi)發(fā)者工具的安裝路徑。若HBuilderX不能正常啟動(dòng)微信開(kāi)發(fā)者工具，需要開(kāi)發(fā)者手動(dòng)啟動(dòng)，然后將uni-app生成小程序工程的路徑拷貝到微信開(kāi)發(fā)者工具里面，在HBuilderX里面開(kāi)發(fā)，在微信開(kāi)發(fā)者工具里面就可看到實(shí)時(shí)的效果。

image
HBuilderX 還提供了快捷運(yùn)行菜單，可以按數(shù)字快速選擇要運(yùn)行的設(shè)備：

image

命令行的方式

也可以使用 cli 腳手架，可以通過(guò) vue-cli 創(chuàng)建 uni-app 項(xiàng)目

安裝nodejs
nodejs下載網(wǎng)址：https://nodejs.org/en/
環(huán)境安裝

npm install -g @vue/cli

創(chuàng)建uni-app (模板項(xiàng)目存放于 Github，由于國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境問(wèn)題，可能下載失敗)

vue create -p dcloudio/uni-preset-vue my-project

此時(shí)，會(huì)提示選擇項(xiàng)目模板，初次體驗(yàn)建議選擇 hello uni-app 項(xiàng)目模板，如下所示：

image
自定義模板
選擇自定義模板時(shí)，需要填寫(xiě) uni-app 模板地址，這個(gè)地址其實(shí)就是托管在云端的倉(cāng)庫(kù)地址。以 GitHub 為例，地址格式為 userName/repositoryName，如 dcloudio/uni-template-picture 就是下載圖片模板。
更多支持的下載方式，請(qǐng)參考這個(gè)插件的說(shuō)明：download-git-repo
運(yùn)行、發(fā)布uni-app

npm run dev:mp-weixin
npm run build:mp-weixin

框架

點(diǎn)擊框架描述查看

微信掃描下方二維碼查看小程序示例（包括內(nèi)置組件、接口、拓展組件、模板）

image
一個(gè)uni-app工程，默認(rèn)包含如下目錄及文件：

image
pages.json 文件用來(lái)對(duì) uni-app 進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。
它類似微信小程序中app.json的頁(yè)面管理部分。注意定位權(quán)限申請(qǐng)等原屬于app.json的內(nèi)容，在uni-app中是在manifest.json中配置
在manifest.json中如果只是微信小程序開(kāi)發(fā)，只需關(guān)注mp-weixin配置項(xiàng)
編譯到任意平臺(tái)時(shí)，static 目錄下的文件均會(huì)被完整打包進(jìn)去，且不會(huì)編譯。非 static 目錄下的文件（vue、js、css 等）只有被引用到才會(huì)被打包編譯進(jìn)去。
static 目錄下的 js 文件不會(huì)被編譯，如果里面有 es6 的代碼，不經(jīng)過(guò)轉(zhuǎn)換直接運(yùn)行，在手機(jī)設(shè)備上會(huì)報(bào)錯(cuò)。
css、less/scss 等資源不要放在 static 目錄下，建議這些公用的資源放在自建的 common 目錄下。
template內(nèi)引入靜態(tài)資源，如image、video等標(biāo)簽的src屬性時(shí)，可以使用相對(duì)路徑或者絕對(duì)路徑，形式如下

<!-- 絕對(duì)路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對(duì)路徑 -->
<image class="logo" src="../../static/logo.png"></image>

開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境

if (process.env.NODE_ENV === 'development') {
  console.log('開(kāi)發(fā)環(huán)境')
} else {
  console.log('生產(chǎn)環(huán)境')
}

主要配置

easycom 配置uView組件庫(kù)的按需引入，具體介紹見(jiàn)下方組件部分

"easycom": {
  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}

page.json文件

{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF",
        "app-plus": {
            "background": "#efeff4"
        },
        "usingComponents": {
            "painter": "/wxcomponents/painter/painter",
            "mp-slideview": "weui-miniprogram/slideview/slideview"
        }
    },
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "發(fā)現(xiàn)",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
                "disableScroll":true
            }
        },
        {
            "path": "pages/commodity/commodity",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "消息",
                "enablePullDownRefresh": false
            }
        },{
            "path": "pages/user/user",
            "style": {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false,
                "backgroundColor": "#F0F0F0",
                "navigationStyle": "custom"
            }
        }
    ],
    "tabBar": {
        "color": "#808080",
        "selectedColor": "#1A1A1A",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "12px",
        "iconWidth": "20px",
        "spacing": "3px",
        "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "static/images/home_normal.png",
                "selectedIconPath": "static/images/home_selected.png",
                "text": "發(fā)現(xiàn)"
            }, {
                "pagePath": "pages/commodity/commodity",
                "iconPath": "static/images/store_normal.png",
                "selectedIconPath": "static/images/store_selected.png",
                "text": "商城"
            }, {
                "pagePath": "pages/message/message",
                "iconPath": "static/images/message_normal.png",
                "selectedIconPath": "static/images/message_selected.png",
                "text": "消息"
            }, {
                "pagePath": "pages/user/user",
                "iconPath": "static/images/user_normal.png",
                "selectedIconPath": "static/images/user_selected.png",
                "text": "我的"
            }
        ]
    },
    "subPackages": [
        {
            "root": "pages-home",
            "pages": [
                {
                    "path": "community-detail/index",
                    "style": {
                        "navigationBarTitleText": "詳情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path" : "comment-detail/index",
                    "style":{
                        "navigationBarTitleText": "全部回復(fù)",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                "path": "release-dynamic/index",
                "style":
                    {
                        "navigationBarTitleText": "發(fā)布動(dòng)態(tài)",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "user-center/index",
                    "style": {
                        "navigationBarTitleText": "個(gè)人中心",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom",
                        "disableScroll":true
                    }
                },
                {
                    "path": "webview/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-commodity",
            "pages": [
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "pay-sure/index",
                    "style": {
                        "navigationBarTitleText": "訂單確認(rèn)",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "mall-comment/index",
                    "style": {
                        "navigationBarTitleText": "用戶評(píng)價(jià)",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "mall-comment-detail/index",
                    "style": {
                        "navigationBarTitleText": "全部回復(fù)",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        },
        {
            "root": "pages-message",
            "pages": [
                {
                    "path": "system-message/index",
                    "style": {
                        "navigationBarTitleText": "系統(tǒng)消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "interactive-message/index",
                    "style": {
                        "navigationBarTitleText": "互動(dòng)消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-user",
            "pages": [
                {
                    "path": "login/login",
                    "style": {
                        "navigationBarTitleText": "登入",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "edit-user-info/index",
                    "style": {
                        "navigationBarTitleText": "個(gè)人資料",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "setting/index",
                    "style": {
                        "navigationBarTitleText": "設(shè)置",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "about/index",
                    "style": {
                        "navigationBarTitleText": "關(guān)于",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "user-services/index",
                    "style": {
                        "navigationBarTitleText": "服務(wù)協(xié)議",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/my-address/index",
                    "style": {
                        "navigationBarTitleText": "我的地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/add-address/index",
                    "style": {
                        "navigationBarTitleText": "添加地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/my-order/index",
                    "style": {
                        "navigationBarTitleText": "我的訂單",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/order-detail/index",
                    "style": {
                        "navigationBarTitleText": "訂單詳情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/logistics-detail/index",
                    "style": {
                        "navigationBarTitleText": "物流詳情",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/release-comment/index",
                    "style": {
                        "navigationBarTitleText": "商品評(píng)價(jià)",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        }
    ]
}

組件

同樣的在pages.json文件的usingComponents中可以引用微信拓展組件, 如下引入方式，編譯時(shí)開(kāi)發(fā)工具將自動(dòng)編譯到項(xiàng)目中，真的是非常的靈活，可以全方位引用多方組件，堪稱完美。

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

點(diǎn)擊組件使用查看,uni-app本身自帶組件庫(kù)，微信掃描下方二維碼查看小程序示例（包括內(nèi)置組件、接口、拓展組件、模板）

image
這里我們同時(shí)導(dǎo)入了第三方組件庫(kù)uView
微信掃描下方二維碼查看小程序示例（包括組件、工具、模板）

image

API

詳細(xì)文檔

uni-app中，相對(duì)于微信小程序，使用uni代替了wx,如下示例代碼。
注意如果項(xiàng)目只運(yùn)行于微信小程序，使用wx或者uni都可以，如果是運(yùn)行于多端必須使用uni

wx.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }
});

uni.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }
});

插件市場(chǎng)

插件市場(chǎng)地址
在插件市場(chǎng)中有豐富的各類模板和組件，自行按需導(dǎo)入（使用HBuilder X可視化新建的項(xiàng)目，可以在插件地址中選擇使用HBuilder X導(dǎo)入插件，方便快捷）

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

uniapp開(kāi)發(fā)微信小程序

uniapp開(kāi)發(fā)微信小程序

微信小程序開(kāi)發(fā)指引

前言

了解微信小程序

官方主頁(yè)

小程序開(kāi)發(fā)指南

開(kāi)發(fā)工具

框架

項(xiàng)目文件描述

主要配置示例

組件

API

拓展能力

調(diào)試

了解uni-app

官方主頁(yè)

快速學(xué)習(xí)建議

快速開(kāi)始

可視化的方式

命令行的方式

框架

主要配置

組件

API

插件市場(chǎng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

uniapp開(kāi)發(fā)微信小程序

微信小程序開(kāi)發(fā)指引

前言

了解微信小程序

官方主頁(yè)

小程序開(kāi)發(fā)指南

開(kāi)發(fā)工具

框架

項(xiàng)目文件描述

主要配置示例

組件

API

拓展能力

調(diào)試

了解uni-app

官方主頁(yè)

快速學(xué)習(xí)建議

快速開(kāi)始

可視化的方式

命令行的方式

框架

主要配置

組件

API

插件市場(chǎng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av