uni-app小程序手把手項目實戰

時間 2019-11-22

標籤 uni app 程序手把手項目實戰简体版

原文原文鏈接

小程序的開發選型，推薦這篇文章小程序開發：用原生仍是選框架css

選型之類過多的話語就不說了，我的仍是比較推薦uni-app，要麼就原生。html

廢話很少說，開幹。vue

1、註冊

網址：微信註冊，根據指引填寫信息node

PS：開發選型的時候必定要注意主體帳號信息的分類，簡單解釋就是這個小程序是要幹嗎的，定位要精準，小程序的上線目前愈來愈嚴格，並非全部小程序都能過審的。好比，人臉受權這種功能，你就很難過審...若是有這個功能，我勸你放棄，走APP。git

2、登陸設置

登陸後找到設置模塊，在這裏你能夠設置一些小程序的主題信息，比較重要的就是這個AppID(小程序ID)，惟一的，至關於微信小程序的敲門磚es6

當項目是多人協做的時候，你能夠添加多個開發者帳號github

3、選框架，安裝開發工具

這裏用的是uni-app，固然微信小程序的微信開發者工具也是要安裝的，微信開發者工具呢建議仍是安裝最新版的，緣由固然是最新版的會不斷加入不少新特性。uni-app的開發也必須安裝HBuilderX工具，這個是捆綁的，沒得選擇。雖然有不少人吐槽這個HBuilderX，號稱傻瓜式的編程工具。好吧，要用uni-app，你必須得裝！！！web

工具安裝：vuex

微信開發者工具npm

HBuilderX

至此，全部的準備工做都OK了，接下來直接進入項目開發了。

4、項目開發

一、新建一個uni-app項目

二、項目結構

.
├─ common/              # 公用工具庫文件
├─ components/          # uni-app組件目錄
│  ├─ comp-a.vue        # 可複用的a組件
├─ hybrid/              # 存放本地網頁的目錄
├─ pages/               # 業務頁面文件存放的目錄
│  ├─ home/            
│  │  ├─ index.vue      # home頁面
│  ├─ list/            
│  │  ├─ index.vue      # list頁面
├─ platforms/           # 存放各平臺專用頁面的目錄
├─ static               # 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此
├─ unpackage/           # 打包目錄
├─ wxcomponents/        # 存放小程序組件的目錄
├─ App.vue              # 應用配置，用來配置App全局樣式以及監聽
├─ main.js              # Vue初始化入口文件
├─ manifest.json        # 配置應用名稱、appid、logo、版本等打包信息
├─ package.json         # 配置頁面路由、導航條、選項卡等頁面類信息
複製代碼

Tips:

static 目錄下的 js 文件不會被編譯，若是裏面有 es6 的代碼，不通過轉換直接運行，在手機設備上會報錯。

css、less/scss 等資源一樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。

三、項目運行 [圖片]

第一次運行容易報圖上的錯，這個時候，能夠手動打開 微信開發者工具， 掃碼登陸(加入開發者帳號)。而後再從新運行到小程序，或者配置微信開發者工具的默認路勁，這樣一勞永逸，就不用每次先開 微信小程序再運行項目了。 [圖片]

再運行的時候一般仍是容易報錯...不過彆着急，一步一步來

再次從新運行小程序，終於能夠編譯成功了，圖爲demo模板的頁面 [圖片]

固然，至此只是讓你先體驗一下uni-app，接下來直接進入正式開發

5、正式項目開發

以前的模板內容太多了，項目從新開啓前仍是從新建一個空的模板吧，新建項目的時候依然選擇uni-app項目+默認模板

1.配置AppID

2.運行項目

爲了方便開發，能夠安裝一個內置的終端，能夠不用額外打開終端

3.搭建目錄框架

由於使用默認模板，因此項目結構很乾淨。接下來先把目錄框架搞定，固然你也能夠按照本身的我的習慣和喜愛自由設置

由於以前安裝了內置終端，因此直接打開終端，會默認打開你所在的項目的根路徑，直接在根路徑下命令行建立目錄文件

mkdir components models store utils
複製代碼

4.微信路由準確的來講uni-app小程序也是單頁面的形式。在小程序中，路由是不用本身定義的。uni-app路由所有交給框架統一管理，開發者須要在pages.json裏配置每一個路由頁面的路徑及頁面樣式，不支持 Vue Router，如圖，pages屬性值的數組內容即爲路由路勁

{
    "pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
    	{
            "path": "pages/index/index",
            "style": {
            	"navigationBarTitleText": "首頁",
            	"navigationBarBackgroundColor": "#FFFFFF"
            }
    	},
        {
            "path" : "pages/mine/index",
            "style" : {
            	"navigationBarTitleText": "我的中心",
            	"navigationBarBackgroundColor": "#FFFFFF"
            }
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "black",
    	"navigationBarTitleText": "uni-app",
    	"navigationBarBackgroundColor": "#F8F8F8",
    	"backgroundColor": "#FFFFFF"
    },
    "tabBar": {
    	"color": "#BBBBBB",
    	"selectedColor": "#212121",
    	"borderStyle": "black",
    	"backgroundColor": "#ffffff",
    	"list": [
            {
            	"pagePath": "pages/index/index",
            	"iconPath": "static/images/tabbar/fans.png",
            	"selectedIconPath": "static/images/tabbar/fans@selected.png",
            	"text": "首頁"
            },
            {
            	"pagePath": "pages/mine/index",
            	"iconPath": "static/images/tabbar/mine.png",
            	"selectedIconPath": "static/images/tabbar/mine@selected.png",
            	"text": "我的中心"
            }
        ]
    }
}
複製代碼

5.vuex狀態管理

首先，uni-app 內置了 vuex。可是vuex是不支持持久化存儲的，因此須要結合第三方來一塊兒協做。

默認的模板項目首先是沒有node-modules模塊依賴的，也就是說你無法進行一些第三方的擴展，因此爲了讓你的項目更加的靈活性，你須要執行如下命令來搭配一些第三方來更爲所欲爲的開發項目

npm init -y
npm install vuex-persistedstate --save
複製代碼

store.js

import Vue from 'vue'
import Vuex from 'vuex'

import home from '@/store/modules/home.js'
import mine from '@/store/modules/mine.js'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const vuexPersisted = new createPersistedState({
    storage: {
    	getItem: key => uni.getStorageSync(key),
        setItem: (key, value) => uni.setStorageSync(key, value),
        removeItem: key => uni.clearStorageSync(key)
    }
})

const store = new Vuex.Store({
    modules: {
    	home,
    	mine
    },
    plugins:[vuexPersisted]
})

export default store
複製代碼

home裏面的vuex結構也展現一下吧

const home = {
    state: {
    	...
    },
    mutations: {
    	...
    },
    actions: {
    	...
    },
    getters: {
    	...
    }
}

export default home
複製代碼

最後，在main.js裏面引用

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

複製代碼

至此，含兩個tabbr選項的無數據交互的小程序ui結構就搭好了。

6.封裝api模塊

由於須要調用服務端的登陸口子，因此咱們優先把請求接口的模塊給添加進來吧。

config配置，appId和appKey能夠從微信官方開發模塊獲取到

//uni-app內置有區別環境的不一樣，能夠直接經過process.env.NODE_ENV獲取
//！！！注意，這裏的接口固然是不能訪問的，正式的api接口是商業保密的，後期抽時間用node來補上吧。項目沒法正常接口請求，請諒解。可是跟着個人思路，把一個項目跑起來是沒有任何問題的。
let BASE_URL = ''
if (process.env.NODE_ENV == 'development') {
    BASE_URL = '192.168.1.1:8090' // qe環境
} else {
    BASE_URL = 'https://www.baidu.com' // 生產環境
}
const config = {
	base_url: BASE_URL,
	appId: 'wxeb407bb6c397aa4c',
	appKey: '675aeecfdac05b6b82b9910a8fd00e88'
}

export { config }
複製代碼

封裝接口請求

import {
	config
} from '../config.js'

class HTTP {
	constructor() {
		this.baseUrl = config.base_url
	}

	request({
		url,
		data = {},
		method = 'GET'
	}) {
		return new Promise((resolve, reject) => {
			this._request(url, resolve, reject, data, method)
		})
	}

	_request(url, resolve, reject, data = {}, method = 'GET') {
		uni.request({
			url: url,
			method: method,
			data: data,
			header: {
				'content-type': 'application/json',
				'appId': config.appId,
				'token': uni.getStorageSync('AuthTokens')
			},
			success: (res) => {
				if (res.data) {
					const _success = res.data.success;
					if (_success) {
						resolve(res.data)
					} else {
						reject(res.data.message)
						const error_code = res.data.code;
						const _message = res.data.message;
						this._show_error(error_code, _message)
					}
				} else {
					resolve(res.data)
				}
			},
			fail: (err) => {
				reject()
				this._show_error(err.message)
			}
		})
	}

	_show_error(error_code, _message) {
		uni.showToast({
			title: `${_message}`,
			icon: 'none',
			duration: 2000
		})
	}
}

export {
    HTTP
}
複製代碼

到此Api請求的模塊就封裝好了，如今開始作接口請求必須攜帶的AuthTokens祕鑰

由於小程序確定會頻繁的切換後臺或者直接切回首頁面，結合小程序的生命週期等，在首頁的主入口通常都會調一次登陸口子，獲取祕鑰token

App.vue

import { AppModel } from './models/app.js'
const appModel = new AppModel()

onShow: function() {
    console.log('on show');
    this.getLogin()
},

methods: {
    getLogin() {
        uni.login({
            success: function(res) {
                if (res.code) {
                    appModel.login({
                        code: res.code
                    }).then(response => {
                        this.$store.dispatch('setUserInfo', response.data)
                        //這裏存儲了以後，等再進入小程序獲取數據或其它的Api交互時，就能夠帶上放在header頭中去向服務端發起請求
                        uni.setStorageSync('AuthTokens', response.data.token)
                        uni.login({
                            success(response) {
                                uni.setStorageSync('wxCode', response.code);
                            }
                        })
                    }).catch(errors => {
                        console.error(errors)
                    })
                }
            },
            fail: function() {
                uni.showToast({
                    title: '微信登陸失敗',
                    icon: 'none'
                })
            }
        });
    }
}
複製代碼

AppModel的接口定義，按照以下標準直接定義便可

import { HTTP } from '../utils/http.js'

class AppModel extends HTTP {
    login(params) {
        return this.request({
            url: `${this.baseUrl}/user/login`,
            method: 'POST',
            data: params
        })
    }
}

export { AppModel }
複製代碼

上面還應用了vuex的狀態管理this.$store.dispatch('setUserInfo', response.data)，因此你還要到store下的home modules模塊作好狀態管理，主要仍是vuex的平常操做。通常來講同步存儲只要放mutations裏面定義便可，主要仍是看我的習慣吧

state: {
    userInfo: {}
},
mutations: {
    SET_USER_INFO: (state, userInfo) => {
    	state.userInfo = userInfo
    }
},
actions: {
    // 緩存用戶信息
    setUserInfo({
        commit
    }, userInfo) {
    	commit('SET_USER_INFO', userInfo)
    }
},
getters: {
    userInfo: state => state.userInfo
}
複製代碼

6、靜默受權

受權登陸是一大重點，在項目剛開始開發的時候尤爲要注意。小程序目前已有官方規定明確禁止新用戶初次打開小程序就喚起受權登陸獲取用戶信息的彈框，也就是說，若是你不當回事的話，即便開發完畢發佈，微信官方團隊也會直接咔嚓回。那個時候再改，代價就太大了

因此呢，目前採用的是靜默受權登陸的方式。什麼是靜默受權呢，就是新用戶進入你的小程序後，他能夠無障礙的訪問你的小程序，當他須要分享、進詳情頁、交互動做、點贊、購買...須要深一層次體驗咱們的小程序的時候，這個時候喚起受權彈窗讓用戶受權以後再繼續下一步是合理的。

接下來是受權登陸的實現。暫時把它放在我的中心的頭像區域吧

1.找到pages-->mine頁面

在ui搭建的工程中，項目默認引用less預處理，雖然不用安裝第三方依賴，都是uni-app內置的，可是想要讓項目正常運行，仍是要安裝編譯時的對應工具，不然會報錯

工具--->插件安裝

而後安裝對應的依賴便可，再從新運行項目

爲了統一靜默受權處理，仍是抽離一個公共組件，存放在components->common->userInfoBtn.vue。

要調取用戶的受權登陸，必須調用微信自帶的button控件才行，包括後面的分享功能模塊也同樣。必需要用到它裏面自帶的open-type屬性。

引用微信自帶的button固然會有不少醜陋的問題，好比樣式，因此這裏仍是要重置下樣式

<template>
    <view class="user-info-container">
        <button class="user-info-btn" open-type="getUserInfo" @getuserinfo="mpGetUserInfo" withCredentials="true">
            <slot></slot>
        </button>
    </view>
</template>

<script>
import {
    AppModel
} from '@/models/app.js'
const appModel = new AppModel();
export default {
    name: 'userInfoBtn',
    data() {
        return {
            userInfo: {}
        }
    },
    methods: {
        mpGetUserInfo(result) {
            //根據調用系統自帶button攜帶的result信息判斷是否有受權信息
            if (result.detail.errMsg !== 'getUserInfo:ok') {
                wx.showToast({
                    title: '取消受權',
                    icon: 'none',
                    duration: 2000
                })
                //hasUserInfo爲存儲用戶是否受權信息
                uni.setStorageSync('hasUserInfo', false)
                return;
            }
            wx.checkSession({
                success() {
                    console.log('有效');
                    //由於用戶受權後需求獲取用戶受權信息，因此這裏必傳encryptedData、iv兩個參數獲取用戶頭像和暱稱信息
                    appModel.login({
                        code: uni.getStorageSync('wxCode'),
                        encryptedData: result.detail.encryptedData,
                        iv: result.detail.iv
                    }).then(response => {
                        this.$store.dispatch('setUserInfo', response.data)
                        uni.setStorageSync('AuthTokens', response.data.token)
                        uni.setStorageSync('hasUserInfo', true)
                        this.$emit('onClickBtn')
                        this.userInfo = result.detail.userInfo
                        uni.login({
                            success(response) {
                                uni.setStorageSync('wxCode', response.code);
                            }
                        })
                    })
                },
                fail() {
                    console.log('失效');
                    uni.login({
                        success: function(res) {
                            if (res.code) {
                                uni.setStorageSync('wxCode', res.code);
                                const params = {
                                    code: res.code
                                }
                                appModel.login({
                                    code: uni.getStorageSync('wxCode'),
                                    encryptedData: result.detail.encryptedData,
                                    iv: result.detail.iv
                                }).then(response => {
                                    uni.login({
                                        success(response) {
                                            uni.setStorageSync('wxCode', response.code);
                                        }
                                    })
                                    this.$store.dispatch('setUserInfo', response.data)
                                    uni.setStorageSync('AuthTokens', response.data.token)
                                    uni.setStorageSync('hasUserInfo', true)
                                    this.$emit('onClickBtn')
                                    this.userInfo = result.detail.userInfo
                                })
                            } else {
                                console.log('獲取用戶登陸態失敗！' + res.errMsg);
                            }
                        },
                        fail: function() {
                            uni.showToast({
                                title: '微信登陸失敗',
                                icon: 'none'
                            })
                        }
                    });
                }
            })
        },
    }
}
</script>

// 樣式重置，這裏的樣式坑是必踩的
<style lang="less" scoped>
    .user-info-btn::after {
        border: 0;
    }
    
    .user-info-btn {
        background-color: transparent;
        line-height: 0;
        padding: 0;
        font-size: 0;
    }
</style>
複製代碼

2.引用上面的封裝受權按鈕

<header>
	<view class="view-header_root" v-if="hasAuthorUrserInfo">
		<view>
			<image class="avatar-img" :src="userInfo.avatarUrl | formatAvatarUrl"></image>
			<image class="avatar-img2" :src="starUrl" v-if="userInfo.starId > 0"></image>
		</view>
		<text>{{userInfo.userName | formatUserName}}</text>
	</view>
	<view class="view-header_root" v-else>
		<userInfoBtn @onClickBtn="onGetAuthData" >
			<section class="un-auth">
				<view>
					<image class="avatar-img" :src="userInfo.avatarUrl | formatAvatarUrl"></image>
					<image class="avatar-img2" :src="starUrl" v-if="userInfo.starId > 0"></image>
				</view>
				<text>uni-小程序</text>
			</section>
		</userInfoBtn>
	</view>
</header>

methods: {
    onGetAuthData() {
    	//受權成功後的回調事件
    	console.log('success')
    }
}
複製代碼

這裏說一個小技巧，在vue項目中引用第三方UI框架時，確定會涉及到修改樣式的問題。因爲咱們在Vue文件中加入了scoped屬性，就是爲了防止頁面之間的樣式污染，因此你想要修改樣式的話，有兩種方式，第一種是新起一個style，不加scoped，而後嚴格遵循BEM命名模式修改樣式，儘可能避免樣式污染其它頁面。第二種就是引用css的/deep/，如

<style lang="less" scoped>
/deep/ .user-info-btn {
    background-color: red;
}
</style>
複製代碼

至此靜默受權的組件封裝和功能都實現完畢了。仍是要再強調一遍，目前開發的小程序必須採用靜默受權登陸的方式，不然你很大機率會被拒...

7、功能擴展

爲了讓這個項目不至於這麼空殼，計劃加入一些經常使用的功能，好比記錄列表上拉加載，下拉刷新、輪播圖、分享、開屏廣告頁、在線客服引入...

1.上拉加載、下拉刷新

入口就是在我的中心的分頁記錄列表

首先加頁面路由，在page目錄下新增一個records頁面，而後在項目根目錄下的pages.json掛載上，若是要新開頁面的話，都要在這個目錄下注冊頁面

如動態圖所示，這裏還抽了一個tab選項卡的小組件。直接開箱即用就行。

上拉加載下拉刷新在uni-app官網上實際上是有介紹的。這裏單獨取出來是因由於接口都配置好了，只要替換成你項目中的服務端數據和修改下樣式便可，功能是已經實現了的。代碼就不全貼了，直接大體介紹下功能點吧

上拉加載下拉刷新這功能大體分兩種狀況，第一種是整個頁面的上拉下拉，這種實現比較簡單，首先固然是要在項目根目錄下的pages.json聲明頁面的可加載屬性

{
    "path" : "pages/records/records",
    "style" : {
        ...
        "enablePullDownRefresh": true
    }
}
複製代碼

而後主要實現兩個方法功能

//頁面上拉觸底事件的處理函數
onReachBottom() {
},
//頁面下拉初始化刷新
onPullDownRefresh() {
}
複製代碼

是否加載完畢能夠在服務端接口返回數據中對對象作處理，對應的業務在代碼中都有實現好，由於接口沒法正常調用，因此你要使用的話，須要替換成你本身聯調的接口。

2.聯繫客服

小程序要作好的話，那細節之處確定是必不可少的。好比客服功能的引入，實時根據用戶的反饋完善或者修復問題

小程序中不須要你額外接入在線聊天工具，固然，若是你想體驗性作得好點，那能夠多投入些精力作好實施聊天這一大模塊。這裏簡單介紹一下用小程序自帶的反饋聊天模塊

首先，仍是得應用微信自帶的button按鈕,指定open-type的值爲contact

<button open-type="contact" bindcontact="handleContact" class="button-item-title">{{item.title}}</button>
複製代碼

在小程序中，開發者能夠登陸 微信小程序管理後臺，進入菜單「客服反饋」頁面獲取反饋內容

3.分享

說完聯繫客服順便說下分享吧，都是一樣的套路，一樣是應用微信自帶的button按鈕,指定open-type的值爲share，而後在vue屬性上指明你要分享的內容

onShareAppMessage() {
    return {
    	title: `分享的標題`,
    	path: `/pages/mine/index?id=${分享要帶的參數}`,
    	imageUrl: `分享的url`
    }
}
複製代碼

分享出去的攜帶的參數id提取的方式是利用小程序的生命週期函數onLoad

onLoad(option) {
    console.log(option)
    this.id = option.id
}
複製代碼

4.輪播圖+跳轉第三方url

一樣封裝成一個工具庫components->common->swiper.vue，工具類就很少說了，引用的是系統自帶的swiper組件

這裏介紹一下跳轉第三方url頁吧，包括在UI搭建階段輪播圖引用其它外域連接的圖片url，這兩個其實算是一類問題。

微信安全規範裏面，是明確禁止沒有在微信開發者後臺加入合法域名時，加入任何的外域連接都爲非法連接，也就是說，即便是聯調的服務端接口，也得把合法域名加進微信的服務器域名名單，包括使用微信拍照或者上傳圖片都必須額外加上這個合法域名名單，圖片信息才能正常顯示，接口才能正常引用。配置詳情以下

配置路徑

配置完後微信開發者工具詳情欄目裏項目配置裏會出現合法域名信息

或者在開發環境時能夠把這裏勾上，但最終項目上線後仍是得記得配置對應的合法域名信息

配置好後，當你的輪播圖對應的是後臺的詳情地址或者是微信公衆號的內容時，纔可以正確跳轉到對應的路徑中。惟一要注意的是，在本地微信開發者工具是沒法測試這一功能的，最好用真機測試，不然仍是要務必保證你的合法域名都在微信後臺添加上了，而且本地設置也去除了合法域名的校檢

//輪播圖跳轉第三方url
uni.navigateTo({
    url: `bannerWebView?url=${encodeURIComponent(url)}`
})
複製代碼

如上代碼所示，詳情頁跳轉第三方url，你必須得新開一個頁面bannerWebview做爲第三方路勁承載的容器，固然，別忘了路由註冊。這裏，你要跳轉的url最好encodeURIComponent(url)，而後在bannerWebview文件中，利用微信自帶的<web-view :src="url"></web-view>，便可進行第三方頁面的跳轉，再次強調一遍，跳轉第三方最好用真機作測試。

這樣，輪播圖功能就搞定了

擴展功能就先作這些吧，後續有時間再加一下上去...

8、開屏廣告頁

如今不少大流量的APP在首次打開時會有一個3~7S不等的小廣告，固然，作得有好點你可讓他隨時都能跳過。小程序裏面也有廣告頁這樣的概念，接下來就讓咱們來實現一下吧

首先是廣告頁的入口構思，廣告頁放哪一個位置合適呢？是放首頁做爲彈窗出現？？？仍是做爲小程序主入口出現？？？由於廣告頁不可能每次打開小程序都出現一次廣告，那用戶確定十分反感，過分挑戰用戶的耐心，確定難逃被用戶卸載的下場...通常合理一點的需求就是天天的第一次打開時，加入一個3~7S不等的小廣告。接下來咱們來實現一下做爲主入口出現的小廣告。

首先，在pages.json註冊頁面路由，這裏務必要注意一點，pages數組中第一項表示應用啓動頁，參考：uniapp.dcloud.io/collocation…

"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
    {
        "path": "pages/ads/index",
        "style": {
            "navigationBarTitleText": "uni-小程序",
            "navigationBarBackgroundColor": "#FFFFFF"
        }
    },
    ... //緊跟其它的頁面
]
複製代碼

廣告頁無非就是一個定時器，而後加一張海報或者由後臺動態配置圖片內容。這裏提幾個小點應該注意的地方，廣告頁確定分打開的時機，也就是說你得判斷好廣告頁按規定時間展現，不能每次打開都有廣告頁的出現。這裏可讓服務端傳給你一個參數。

計數器結束後，能夠當即跳轉到小程序首頁，而且終止定時器

methods: {
    uni.reLaunch({
        url: '/pages/index/index'
    })
},
onHide() {
    //清除定時器 
    this.clearTimer()
}
複製代碼

廣告頁功能的最後，打測試包或者正式包的時候必定要記得修改主入口頁信息！！！不然上線後會一片空白，等廣告頁定時器結束以後纔到主頁

9、發佈測試

打開微信開發者工具，在工具欄找到上傳，填寫版本號，發佈。測試版本號能夠隨意填寫，不過建議仍是規範一點寫比較好

上傳成功以後，能夠打開微信開發者管理後臺，如今能夠看到開發者的版本

而後指定小程序的主入口頁，主要參照pages.json屬性值pages數組的第一項的值

而後，就能夠做爲體驗版本提交了。

9、發佈正式

測試版本和正式版本仍是有差距的。正式版本中，由於小程序發版限制在2M之內，因此有幾點務必要引發注意

圖片用CDN，不要用本地圖片加載，圖片內容太大
確認涉及到這些功能點的域名信息在微信開發後臺管理中有配置

使用iconFont替代純色小圖標
儘可能不要引用第三方字體
雪碧圖
... ...

發佈上線。

測試發版只要在開發者工具中直接打包上線便可，沒有這麼多的條條框框。可是正式版發版就不同了，就最關鍵的一點，開發版和正式版的服務端域名確定不同吧？！因此，爲了不每次發版手動頻繁修改配置接口，形成哪次不當心把測試版的發線上去，最好作個區分，把開發環境和正式環境區分開來。發正式版本的時候打正式環境的包

主要配置呢就是在根目錄新建個config.js文件，區分開發和正式版就是自帶的process.env.NODE_ENV屬性值

if (process.env.NODE_ENV == 'development') {
    BASE_URL = '192.168.1.1:8090' // qe環境
} else {
    BASE_URL = 'https://www.baidu.com' // 生產環境
}
複製代碼

而後打正式包的時候，選擇HBuilderX開發工具工具欄發行->小程序（微信）

而後檢查小程序名稱+AppId，確認無誤點擊發行，會再在微信開發者工具裏開一個窗口，運行一樣的小程序。區別只是域名地址不同了，開發版本是本地ip，發行後的服務域名是正式的線上地址。以防萬一，能夠打開微信開發者工具欄的工具面板查看一下域名是否正確

確認無誤後再重複測試版本發版便可

至此，小程序的開發到上線就所有完成了。

10、題外話

仍是迴歸到框架的選型來說講，選用uni-app開發小程序，打包上傳後，代碼竟驚人的被壓縮到了1M之內。相對比mpvue就重了很多，有大1M多。

當時並行作的是兩個小程序，基於mpvue和基於uni-app，結果是mpvue由於前期問題不斷，致使發版被拒次數增多，最後都修復徹底正式上線以後，再更新迭代，審覈的時間依然長的很。可是uni-app作的小程序就沒這個問題了，前期的幾版發版比較順利的話，後期再更新迭代，那速度真是嗖嗖的，廣泛都是在一個工做日內。等信用（經過率）累計到了必定程度，會直接上微信審覈的白名單，開啓半小時審覈急速上線的通道，真香~

好了，基於uni-app的小程序開發到此結束了，喜歡的話請多賜個贊!!!吧。