uni-app結合雲函數開發小程序博客（一）：環境搭建

uni-app 是一個使用 Vue.js 開發的跨平臺應用的前端框架，開發者編寫一套代碼，可發佈到iOS、Android、H五、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺；uni在跨端的同時，經過條件編譯和對應平臺特有API地調用，能夠很好得爲某個平臺寫個性化的代碼、調用其獨有能力而不影響其它平臺；生態豐富，支持npm包管理，豐富的第三方SDK集成和高達1600個插件的支持；上手容易，採用vue語法和微信小程序api，無額外學習成本，同時開發利器HbuilderX具備強大的語法提示。相信它將是你跨端開發的不二選擇。

開始學習

起步

在這一系列教程中，咱們將構建一個微信小程序應用 —— 博客（最近在準備面試，尚未測試其它端），後端使用雲函數，包括登陸、註冊、文章列表、文章詳情、國際化、更改主題等，樣式使用 colorui ，感謝做者，開源真香_。_雲函數對於前端開發來講又是一項新技能。

uni-app官網

項目地址

咱們將實現什麼？（樣式略差請原諒）

具體有四個頁面：

1. 登陸：輸入用戶名密碼，同時也能夠微信登錄 openid （我的項目沒法獲取手機號登陸）。
2. 註冊：輸入用戶名密碼註冊（暫只限制了不爲空）。
3. 首頁：文章列表，種類tab標籤，上拉刷新，下拉加載。
4. 個人：只作了語言和主題切換。

提示

開始前須要瞭解的知識：

1. Vue基礎知識
2. 瞭解 uni-app 的API
3. 簡單瞭解 uniCloud
4. 安裝好微信開發者工具（記得在運行配置中添加微信開發者工具路徑，運行會自動啓動）

項目開始

建立新的uniapp項目，記得勾選啓用uniCloud，我選用的阿里雲

目錄結構以下

提示

App.vue 中不要寫 template 佈局，不像 vue 包裹 ， 應用打開首頁爲 pages.json 第一項。App.vue 中儘可能也不要作路由跳轉。可是像推送須要在App.vue 中onLaunch中配置， 根據條件跳轉頁面。

因爲咱們使用自定義導航欄，登陸頁和註冊頁不須要，因此 pages.json 中 navigationStyle 爲 custom

// 如下代碼在 /pages.json 文件中 "globalStyle": { "navigationStyle": "custom" },

引入colorUI

首先插件市場下載zip包

文件放在項目的根目錄，以後我會把本身的組件或者樣式文件都放其中。 在App.vue 文件中引入

// 如下代碼在 /App.vue 文件中 <style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "colorui/animation.css"; </style>

打開pages/index/index.vue， 寫下測試代碼 <button type="default" class="bg-blue btn cu-btn">click</button>， 啓動微信小程序，可查看運行結果正確，說明導入成功

使用Vuex

根目錄下建立 store/index.js （uni也支持vue的modules形式，你們可自行使用）。

主題更改和多語言支持，我使用本地存儲結合 vuex 的方式，不涉及服務器存儲。（API 使用請看官網）

本地存儲 ：uni.setStorageSync("userLang"， 'xxx'’)

數據讀取：uni.getStorageSync("userLang")

獲取系統語言： uni.getSystemInfoSync().language

• 多語言

在根目錄下新建 language/zh.js, language/en.js。內部數據格式爲

// 如下代碼在 /language/zh.js 文件中 module.exports = { // langType 屬性爲語言包標識，用它判斷當前語言 langType : 'zh-CN', // 登錄頁 login_title: '博客' } // 如下代碼在 /language/en.js 文件中 module.exports = { langType : 'en', login_title: 'UBLOG' }

在 vuex 中咱們第一步讀取本地緩存，若是沒有讀取系統語言，選取正確文件進行賦值

// 如下代碼在 /store/index.js 文件中 // 1. 是否有本地緩存語言 let userLang = uni.getStorageSync("userLang"); // 2. 沒有用戶設置，取系統語言 if(!userLang){ const sys = uni.getSystemInfoSync(); userLang = sys.language; } // 根據語言讀取文件 if(userLang.substring(0,2) == 'zh'){ lang = require('../language/zh.js'); }else{ lang = require('../language/en.js'); }

定義 store 中的數據

// 如下代碼在 /store/index.js 文件中 const store = new Vuex.Store({ modules, state: { lang: lang }, mutations: { changeLang: function(state){ // 顯示操做菜單, 也能夠其它方式 uni.showActionSheet({ itemList:['簡體中文', 'English'], success (e) { if(e.tapIndex == 0){ lang = require('../language/zh.js') }else{ lang = require('../language/en.js') } uni.setStorageSync("userLang", lang.langType) state.lang = lang } }) } } })

因爲每一個頁面都要使用 lang 獲取對應的顯示，我在 main.js 中使用了全局混入

// 如下代碼在 /main.js 文件中 // 全局公用 Vue.mixin({ computed: { lang() { return this.$store.state.lang } } })

改動index.vue 頁面進行測試

// 如下代碼在 /pages/index/index.vue 文件中 <view>{{lang.login_title}}</view> <button type="default" class="bg-blue btn cu-btn" @tap='changeLang'>click</button> changeLang () { this.$store.commit('changeLang') }

效果以下： 刷新頁面也會保留選擇的語言。成功

• 更換主題 （藉助 colorui 樣式）

先看下流弊的 colorui 顏色， 直接實現了背景色和字體顏色，再次感謝大佬的付出。具體顏色你們能夠查看 main.css 中的 .bg-樣式

在index目錄建立 theme.js存放咱們的顏色，格式以下。 （你們能夠根據本身的喜愛再添加）

// 如下代碼在 /pages/index/theme.js 文件中 export const ColorList = [{ title: '嫣紅', name: 'red', color: '#e54d42' }, { title: '桔橙', name: 'orange', color: '#f37b1d' }, { title: '明黃', name: 'yellow', color: '#fbbd08' }, { title: '橄欖', name: 'olive', color: '#8dc63f' }, { title: '森綠', name: 'green', color: '#39b54a' }, { title: '天青', name: 'cyan', color: '#1cbbb4' }, { title: '海藍', name: 'blue', color: '#0081ff' }, { title: '奼紫', name: 'purple', color: '#6739b6' }, { title: '木槿', name: 'mauve', color: '#9c26b0' }, { title: '桃粉', name: 'pink', color: '#e03997' }, { title: '棕褐', name: 'brown', color: '#a5673f' }, { title: '玄灰', name: 'grey', color: '#8799a3' }, { title: '草灰', name: 'gray', color: '#aaaaaa' }, { title: '墨黑', name: 'black', color: '#333333' } ]

index.vue 文件中引入， 我指望的是隨機取6個不一樣顏色。模態框使用的是cu-model，你們可使用微信小程序的colorui，看到樣式再到源碼裏面去找，由於如今尚未官網

// 如下代碼在 /pages/index/index.vue 文件中 <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="modalName =''"> <view class="cu-dialog" @tap.stop=""> <radio-group class="block" @change="RadioChange"> <view class="cu-list menu text-left"> <view class="cu-item" v-for="(item,index) in themeList" :key="index"> <label class="flex justify-between align-center flex-sub"> <view class="flex-sub flex"> <view>{{item.title}}</view> <view :style="{backgroundColor: item.color}" style='height: 50rpx;width: 100rpx;margin-left: 30rpx;'></view> </view> <radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false" :value="item.name"></radio> </label> </view> </view> </radio-group> </view> </view> <!--根據主題 動態class--> <button type="default" class="btn cu-btn" :class="['bg-' + themeColor.name]" @tap='changeTheme' data-target="RadioModal">click</button>

// 如下代碼在 /pages/index/index.vue 文件中 import {ColorList} from './theme.js' export default { data() { return { modalName: '', themeList: [] } }, methods: { changeTheme (e) { this.themeList = [] // 循環取出顏色 for (let i = 0;i<ColorList.length;i++) { let random = Math.floor(Math.random() * ColorList.length) let item = ColorList[random] this.themeList.indexOf(item) === -1 && this.themeList.push(item) if (this.themeList.length > 5) break } // 直接使用colorui的方法，沒有用 true false顯示隱藏， 你們能夠自行修改 this.modalName = e.currentTarget.dataset.target }, RadioChange (e) { let name = e.detail.value // 獲取選中的顏色 let obj = this.themeList.filter(item => { return item.name === name }) // 更新全局狀態 this.$store.commit('setThemeColor', obj[0]) this.modalName = '' }, } }

修改 vuex  , 同時修改混入

// 如下代碼在 /store/index.js 文件中 state: { lang: lang, themeColor: { title: '嫣紅', name: 'red', color: '#e54d42' } }, mutations: { setThemeColor(state, val) { state.themeColor = val } } // 如下代碼在 /main.js 文件中 // 全局混入 Vue.mixin({ computed: { lang() { return this.$store.state.lang }, themeColor() { return this.$store.state.themeColor } } })

見證奇蹟：  （模態框中的顏色隨機改變，主題色也更改爲功）

本節的主體功能都實現了。你們能夠申請appid（不會的可百度查找教程），使用二維碼掃描，手機預覽 （右上角三個點能夠進入開發調試，vConsole能夠查看真機打印調試）

成功

留個課後做業， 這節課只是個環境搭建，UI 引用。感興趣的朋友能夠添加tabbar，更改主題和語言的同時，也修改tabbar的顏色和主題（以後會講到）

附加 （打開第三方小程序）

有時碰到想要實現個樣式，須要查看colorui，能夠直接在 本身的小程序中打開。（ 如下是附加部分，跟內容主題無關，感興趣朋友能夠繼續閱讀）

• API （uni開發微信小程序，可使用uni.，也可使用wx.）

// 如下文件放在頁面的 methods 方法中 wx.navigateToMiniProgram({ appId: 'wxfd5241d66a07713f', path:'pages/index/index', // 不要加 .html， 不要加 不要加 重要的事情說三遍 success(res) { // 打開成功 }, fail: function (e) { console.log(e) } })

• 獲取appId （右上角）

• 獲取頁面路徑 (登錄本身的小程序)

• 配置 源碼視圖

// 如下代碼在 /manifest.json 文件中 "mp-weixin" : { "appid" : "", "setting" : { "urlCheck" : false }, "navigateToMiniProgramAppIdList" : [ "wxfd5241d66a07713f"], // 打開第三方小程序要配置該字段 "usingComponents" : true },

真機運行成功！（你們可自行真機調試）

你們好我是測不許，第一次在圖雀社區寫文章，技術通常，能力通常，但很感謝領導給個人支持和鼓勵。若是寫的對您有幫助，小編也會感到欣慰；若是有不對的地方，請多指正，我也會好好學習。也很感謝白神，讓我知道了把東西分享出來，讓本身在整理文字的時候也會結構清晰，想的不對的地方也會去查找，不斷完善本身的能力。

下一篇進入登陸和註冊頁面，封裝下彈出框，請求。配置雲函數。 謝謝閱讀！