注冊微信小程序賬號

注冊賬號

建議開發(fā)者在準(zhǔn)備開發(fā)/學(xué)習(xí)小程序前都應(yīng)該首先前往微信公眾平臺注冊一個小程序賬號。開發(fā)者可移步微信公眾平臺 https://mp.weixin.qq.com ，點擊【賬號分類】下的【小程序】，在小程序注冊頁面點擊【前往注冊】按照要求注冊小程序賬號。

詳細(xì)流程請查看官方文檔：https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html

查看AppID

目前，我們需要打開微信公眾平臺 https://mp.weixin.qq.com/ 掃碼登錄小程序管理后臺。

點擊小程序管理后臺左側(cè)【開發(fā)】，隨后在右側(cè)頂部點擊【開發(fā)設(shè)置】，找到頁面中的 AppID (小程序ID)。

AppID 是非常重要的小程序 ID 相當(dāng)于小程序平臺的一個身份證，后續(xù)你會在很多地方要用到 AppID （注意這里要區(qū)別于服務(wù)號或訂閱號的 AppID），請開發(fā)者妥善保管和保存。

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

小程序的開發(fā)工具官方名稱為：“微信開發(fā)者工具”，其中并不包含“小程序”3個字?？磥砦⑿诺倪@個 IDE 并不想僅僅只是用來開發(fā)小程序。事實上也確實如此，這款開發(fā)工具不僅僅可以用來開發(fā)小程序，還可以用來調(diào)試運行在微信上的網(wǎng)頁以及微信小游戲。

現(xiàn)在，微信官方提供了4個不同用途的開發(fā)工具版本：

• 穩(wěn)定版 （ Stable Build ）
• 預(yù)發(fā)布版（ RC Build )
• 開發(fā)版 ( Nightly Build )
• 小游戲版 ( Minigame Build )

每個版本下又分別提供了 Windows 64、Windows 32 和 MacOS 三個細(xì)分版本。

從穩(wěn)定性上來說，穩(wěn)定版 > 預(yù)發(fā)布版 > 開發(fā)版。這里選擇下載（穩(wěn)定版）開發(fā)者工具。

微信開發(fā)者工具的官方下載地址為：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新建第一個項目

開發(fā)工具安裝完成后，我們來新建第一個小程序項目。雙擊打開微信開發(fā)者工具，如果你是第一次打開或者長時間未打開微信開發(fā)者工具，開發(fā)工具都會彈出一個二維碼，請使用微信“掃一掃”掃描該二維碼。進(jìn)入微信開發(fā)者工具后你將看到下圖的微信開發(fā)者工具首選頁面：

選擇第一個【小程序】，然后在右側(cè)點擊 + ，這將打開一個新建小程序的面板，如圖所示：

面板中需要填入的選項有：

1. 【項目名稱】建議使用英文，如 HelloWorld，中文可能會引起一些未知錯誤。注意，項目名稱不可以重名。
2. 【目錄】選擇一個空的文件夾用于存放小程序的項目文件。
3. 【AppID】將前面獲取的 AppID 在此處填入 AppID 即可。
4. 【開發(fā)模式】請選擇“小程序”。
5. 【后端服務(wù)】選擇“不使用云服務(wù)”?！痹品?wù)“和”云開發(fā)“均是騰訊提供的一種快速服務(wù)端解決方案，并不是我們開發(fā)小程序服務(wù)端的必備選擇。
6. 【模板選擇】選擇“不使用模板”。

如果你沒有申請 AppID，在第二步中，你也可以點擊【AppID】下的【測試號】這個選項。小程序?qū)槟阕詣由梢粋€用于測試的 AppID。這里不建議使用測試的 AppID，因為它也有許多的限制和缺陷，僅適用于快速查看/體驗小程序。

成功創(chuàng)建項目后，將進(jìn)入到如圖所示的開發(fā)者工具主界面中。

使用第三方組件庫

安裝Vant組件庫

步驟一 通過 npm 安裝

# 通過 npm 安裝
npm i @vant/weapp -S --production

# 通過 yarn 安裝
yarn add @vant/weapp --production

# 安裝 0.x 版本
npm i vant-weapp -S --production

步驟二 修改 app.json

將 app.json 中的 "style": "v2" 去除，小程序的新版基礎(chǔ)組件強行加上了許多樣式，難以覆蓋，不關(guān)閉將造成部分組件樣式混亂。

步驟三 構(gòu)建 npm 包

打開微信開發(fā)者工具，點擊 工具 -> 構(gòu)建 npm，構(gòu)建完成后，即可引入組件。

使用 Vant 組件

引入組件

以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應(yīng)的路徑即可。

所有組件文檔中的引入路徑均以 npm 安裝為例，如果你是通過下載源代碼的方式使用 @vant/weapp，請將路徑修改為項目中 @vant/weapp 所在的目錄。

// 通過 npm 安裝
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

// 通過下載源碼使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

// 通過下載源碼使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

使用組件

引入組件后，可以在 wxml 中直接使用組件

支持default、primary、info、warning、danger五種類型，默認(rèn)為default。

<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

效果如圖所示：

添加標(biāo)簽頁面

在 app.json 中添加頁面路徑，并保存文件，即可在 pages 目錄下自動生成對應(yīng)的頁面文件。

設(shè)置小程序底部 tabBar 欄

添加 tabBar 圖標(biāo)

在阿里圖標(biāo)庫 https://www.iconfont.cn/ 下載項目需要的圖標(biāo)，保存在 static 文件夾下

修改配置

修改 app.json 文件添加 tabBar 相關(guān)配置

"tabBar": {
    "color": "#666666",
    "selectedColor": "#1677ff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "static/tarbar-icon/index.png",
      "selectedIconPath": "static/tarbar-icon/index_active.png"
    }, {
      "pagePath": "pages/page1/index",
      "text": "第一頁",
      "iconPath": "static/tarbar-icon/page1.png",
      "selectedIconPath": "static/tarbar-icon/page1_active.png"
    }, {
      "pagePath": "pages/page2/index",
      "text": "第二頁",
      "iconPath": "static/tarbar-icon/page2.png",
      "selectedIconPath": "static/tarbar-icon/page2_active.png"
    }, {
      "pagePath": "pages/page3/index",
      "text": "第三頁",
      "iconPath": "static/tarbar-icon/page3.png",
      "selectedIconPath": "static/tarbar-icon/page3_active.png"
    }]
  }

自定義 tabBar

基礎(chǔ)庫 2.5.0 開始支持，低版本需做兼容處理。

自定義 tabBar 可以讓開發(fā)者更加靈活地設(shè)置 tabBar 樣式，以滿足更多個性化的場景。

在自定義 tabBar 模式下

• 為了保證低版本兼容以及區(qū)分哪些頁面是 tab 頁，tabBar 的相關(guān)配置項需完整聲明，但這些字段不會作用于自定義 tabBar 的渲染。
• 此時需要開發(fā)者提供一個自定義組件來渲染 tabBar，所有 tabBar 的樣式都由該自定義組件渲染。推薦用 fixed 在底部的 cover-view + cover-image 組件渲染樣式，以保證 tabBar 層級相對較高。
• 與 tabBar 樣式相關(guān)的接口，如 wx.setTabBarItem 等將失效。
• 每個 tab 頁下的自定義 tabBar 組件實例是不同的，可通過自定義組件下的 getTabBar 接口，獲取當(dāng)前頁面的自定義 tabBar 組件實例。

注意：如需實現(xiàn) tab 選中態(tài)，要在當(dāng)前頁面下，通過 getTabBar 接口獲取組件實例，并調(diào)用 setData 更新選中態(tài)?？蓞⒖嫉撞康拇a示例。

配置信息

• 在 app.json 中的 tabBar 項指定 custom 字段為 true，同時其余 tabBar 相關(guān)配置也補充完整。
• 所有 tab 頁的 json 里需聲明 usingComponents 項，也可以在 app.json 全局開啟。

"tabBar": {
    "custom": true,
}

添加 tabBar 代碼文件

在項目根目錄下添加入口文件:

注意：命名不可隨意改動

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

編寫 tabBar 代碼

使用 Vant 組件庫的 Tabbar 標(biāo)簽欄

<!-- custom-tab-bar/index.wxml -->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image class="icon" slot="icon" src="{{ item.iconPath }}" />
    <image slot="icon-active" src="{{ item.selectedIconPath }}" />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

/* custom-tab-bar/index.wxss */
.icon {
  width: 25px;
  height: 25px;
}

// custom-tab-bar/index.json 
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

// custom-tab-bar/index.js
Component({
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    active: 0,
    list: [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "/static/tarbar-icon/index.png",
      "selectedIconPath": "/static/tarbar-icon/index_active.png"
    }, {
      "pagePath": "pages/page1/index",
      "text": "第一頁",
      "iconPath": "/static/tarbar-icon/page1.png",
      "selectedIconPath": "/static/tarbar-icon/page1_active.png"
    }, {
      "pagePath": "pages/page2/index",
      "text": "第二頁",
      "iconPath": "/static/tarbar-icon/page2.png",
      "selectedIconPath": "/static/tarbar-icon/page2_active.png"
    }, {
      "pagePath": "pages/page3/index",
      "text": "第三頁",
      "iconPath": "/static/tarbar-icon/page3.png",
      "selectedIconPath": "/static/tarbar-icon/page3_active.png"
    }]
  },
  /**
   * 組件的方法列表
   */
  methods: {
    onChange(event) {
      wx.switchTab({
        url: '/' + this.data.list[event.detail].pagePath
      });
    },
    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.pagePath === page.route)
      });
    },
  }
})

待解決的問題

這里有兩個問題待解決：

1. TODO 解決微信小程序 自定義tabBar 切換時候閃爍問題。

2. TODO Skyline引擎渲染情況下，自定義tabBar顯示異常。

使用分包

何時需要分包

分包的目的在于加快用戶下載小程序包的速度，改善用戶體驗，此處建議小程序所有頁面在20個及以下，可以不用分包，超過則進(jìn)行分包，并將用戶高頻訪問的頁面放在主包配置中；

特殊情況如頁面少，但某些頁面很重，也需要進(jìn)行分包，具體結(jié)合具體頁面數(shù)、頁面數(shù)據(jù)大小、用戶高頻訪問的頁面等實際因素確定如何分包。

目錄結(jié)構(gòu)

推薦的主包和分包的一種文件組織的目錄結(jié)構(gòu)如下：

├── subpackages
│   ├── index
│   │   ├── index-detail-1
│   │   └── index-detail-2
│   ├── page1
│   │   └── page1-detail
├── pages
│   ├── index
│   ├── page1
│   ├── page2
│   └── page3
└── utils

分包預(yù)下載

使用場景

開發(fā)者可以通過配置，在進(jìn)入小程序某個頁面時，由框架自動預(yù)下載可能需要的分包，提升進(jìn)入后續(xù)分包頁面時的啟動速度。

配置方法

預(yù)下載分包行為在進(jìn)入某個頁面時觸發(fā)，通過在 app.json 增加 preloadRule 配置來控制。

{
  "pages": [
    "pages/index/index",
    "pages/page1/index"
  ],
  "subpackages": [
    {
      "root": "subpackages/index",
      "pages": [
        "index-detail-1/index",
        "index-detail-2/index"
      ]
    }, {
      "name": "page1",
      "root": "subpackages/page1",
      "pages": [
        "page1-detail/index"
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subpackages/index"]
    },
    "pages/page1/index": {
      "packages": ["page1"]
    }
  }
}

preloadRule 中，key 是頁面路徑，value 是進(jìn)入此頁面的預(yù)下載配置，每個配置有以下幾項：

限制

同一個分包中的頁面享有共同的預(yù)下載大小限額 2M，限額會在工具中打包時校驗。

如，頁面 A 和 B 都在同一個分包中，A 中預(yù)下載總大小 0.5M 的分包，B中最多只能預(yù)下載總大小 1.5M 的分包。

WXML 模板（template）

介紹

WXML 提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。

定義模板

使用 name 屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段，如：

<!-- msgItem.wxml -->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

引用模板

WXML 提供兩種文件引用方式import和include。

import

import可以在該文件中使用目標(biāo)文件定義的template，如：

在 item.wxml 中定義了一個叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域

import 有作用域的概念，即只會 import 目標(biāo)文件中定義的 template，而不會 import 目標(biāo)文件 import 的 template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

<!-- a.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- b.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- c.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include 可以將目標(biāo)文件除了 <template/> <wxs/> 外的整個代碼引入，相當(dāng)于是拷貝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

使用模板

使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：

<import src="msgItem.wxml"/>
<template is="msgItem" data="{{...item}}"/>

// pages/index/index.js
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 屬性可以使用 Mustache 語法，來動態(tài)決定具體需要渲染哪個模板：

<!-- number.wxml -->
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<!-- pages/index/index.wxml -->
<import src="number.wxml"/>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)以及模板定義文件中定義的 <wxs /> 模塊。

自定義頁面加載動畫模板

創(chuàng)建 loading 文件

在項目根目錄添加以下文件：

/templates/loading/loading.wxml
/templates/loading/loading.wxss

定義 loading 模板

<template name="loading">
  <view class="loading-container">
    <view class="set-one">
      <view class="circle"></view>
      <view class="circle"></view>
    </view>
    <view class="set-two">
      <view class="circle"></view>
      <view class="circle"></view>
    </view>
  </view>
</template>

.loading-container {
  overflow: hidden;
  height: 100%;
  width: 100%;
  z-index: 999;
  background-color: #f2f2f2;
}

.loading-container .circle {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  background: #1677ff;
  border-radius: 50%;
  margin: -25rpx;
  animation: mesh 3s ease-in-out infinite -1.5s;
}

.loading-container>view .circle:last-child {
  animation-delay: 0s;
}

.loading-container>view {
  position: absolute;
  top: 50%;
  left: 50%;
}

.loading-container>view:last-child {
  transform: rotate(90deg);
}

@keyframes mesh {
  0% {
    transform-origin: 50% -100%;
    transform: rotate(0);
  }

  50% {
    transform-origin: 50% -100%;
    transform: rotate(360deg);
  }

  50.00001% {
    transform-origin: 50% 200%;
    transform: rotate(0deg);
  }

  100% {
    transform-origin: 50% 200%;
    transform: rotate(360deg);
  }
}

使用 loading 模板

<import src="/templates/loading/loading.wxml" />
<template wx:if="{{loading}}" is="loading" />
<view wx:else>內(nèi)容</view>

效果

寫在最后

案例中使用到的代碼已上傳到 github ，如有需要，請自行下載。

github地址：https://github.com/Huang-JunBin/miniprogram文章來源地址http://www.zghlxwxcb.cn/news/detail-772018.html

到了這里，關(guān)于【微信小程序】從零開始搭建微信小程序項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！