大家都知道uni-app發展迅猛，以及開發工具都十分方便。
我們根據官網的步驟新建一下uni-app的項目
環境爲vue（自己安裝）
以下步驟截取於官網
使用正式版（對應HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版（對應HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
官網提示如下：
執行新建命令會從網絡下載模塊，需要一段時間
因爲之前我自定義過一個ts的默認模版，所以會比官網提供多一個選項，如下圖所示
初次的話直接選擇Hello uni-app就可以了
然後等待下載成功即可。
進入項目，執行npm run serve
第一次打開是沒有跳轉按鈕的，這是我後面加的，不用在意
我們先引入uni-request這個比較簡單的插件，進行簡單的請求攔截。
cnpm install uni-request --save
現在新增一個js文件並自定義一下請求信息
import uniRequest from 'uni-request'
uniRequest.defaults.baseURL = '*******';
uniRequest.defaults.headers.common['Authorization'] = '****';
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 其餘自定義信息可參考axios封裝自定義
export default uniRequest
然後在main.js中全局引入掛載
import uniRequest from '@/utils/request.js'
Vue.prototype.uniRequest = uniRequest
我們在代碼中引入測試一下
在index.vue文件中
先測試uni.request原生api用法，這是個免費api去地址官網申請一下就可以了
// 獲取天氣
getWeatherInfo(cityId) {
const that = this
// 測試發送請求
uni.request({
url: 'https://www.tianqiapi.com/api?version=v1&appid=****&appsecret=****&cityid=' + cityId,
method: 'GET',
success: function (res) {
console.log(res)
},
fail: function (err) {}
})
},
請求成功
接下來我們使用封裝過的uniRequest測試一下，並且使用了異步請求同步化
async getHomeData() {
// 測試發送請求
const res = await this.uniRequest.get('/template/getTemplateList?type=applet')
console.log(res)
},
請求成功
然後在引入我自我感覺最麻煩的uni-simple-router這個插件，官網說跟vue-router是一樣一樣的，但是經常我的嘗試，發現只有p發展迅猛，以及開發工具都十分方便。
我們根據官網的步驟新建一下uni-app的項目官網任意門環境爲vue（自己安裝）以下步驟截取於官網使用正式版（對應HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版（對應HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
官網提示如下：執行新建命令會從網絡下載模塊，需要一段時間因爲之前我自定義過一個ts的默認模版，所以會比官網提供多一個選項，如下圖所示初次的話直接選擇Hello uni-app就可以瞭然後等待下載成功即可。進入項目，執行npm run serve第一次打開是沒有跳轉按鈕的，這是我後面加的，不用在意我們先引入uni-request這個比較簡單的插件，進行簡單的請求攔截。
cnpm install uni-request --save
現在新增一個js文件並自定義一下請求信息
timport uniRequest from 'uni-request'uniRequest.defaults.baseURL = '*******';
uniRequest.defaults.headers.common['Authorization'] = '****';
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 其餘自定義信息可參考axios封裝自定義export default uniRequest
然後在main.js中全局引入掛載
import uniRequest from '@/utils/request.js'
Vue.prototype.uniRequest = uniRequest
我們在代碼中引入測試一下在index.vue文件中先測試uni.request原生api用法，這是個免費api去地址官網申請一下就可以了
// 獲取天氣getWeatherInfo(cityId) {
const that = this // 測試發送請求
uni.request({
url: 'https://www.tianqiapi.com/api?version=v1&appid=****&appsecret=****&cityid=' + cityId,
method: 'GET',
success: function (res) { console.log(res) },
fail: function (err) {} }) },
請求成功接下來我們使用封裝過的uniRequest測試一下，並且使用了異步請求同步化
async getHomeData() { // 測試發送請求
const res = await this.uniRequest.get('/template/getTemplateList?type=applet') console.log(res) },
請求成功然後在引入我自我感覺最麻煩的uni-simple-router這個插件，官網說跟vue-router是一樣一樣的，但是經常我的嘗試，發現只有自動構建路由表的方式能夠成功引入，引入之後還是有一系列的問題。
我給大家說一下我使用自己創建路由表的方式出現的問題
引入方式我就不贅述了，官網提供了各種各樣的方式
按照官網模式我們使用了npm的方式引入
如果按照官網直接使用下面的方式引入
那麼RouterMount會報各種各樣的錯誤，也可能是能力不夠，如果有任何問題，可以直接聯繫我。其實還存在另外一個報錯大致是name和path找不到是undefined，但是因爲測試的也可能不出現，也可以用註釋這個來解決
附上router/index.js的代碼
import Vue from 'vue'
import Router,{RouterMount} from 'uni-simple-router'
Vue.use(Router)
const router = new Router({
debugger: true,
routes: [
{
//注意：path必須跟pages.json中的地址對應，最前面別忘了加'/'哦
path: '/pages/index/index',
name: 'index', //在路由跳轉時可直接使用name來跳轉，後面會講到
aliasPath: '/' //對於h5端你必須在首頁加上aliasPath並設置爲/
//可以自定義路由元信息
},
{
path: '/pages/login/login',
name: 'login'
}
]
})
console.log(router)
router.beforeEach((to, from, next) => {
// ...
console.log(to)
console.log(from)
next()
})
export default router
解決方法是把
//v1.3.5起 H5端 你應該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app, '#app');
// #endif
// #ifndef H5
app.$mount(); //爲了兼容小程序及app端必須這樣寫纔有效果
// #endif
直接寫成這樣，估計跨平臺的話會存在問題，但是至少不會報錯（也求大佬們賜教）
app.$mount();
這樣是成功之後的樣子，但是它不會自動切換頁面，就會觸發路由守衛函數，只有當使用this.$Router.**這樣的函數纔會觸發，類似於下面這樣
this.$Router.push('/pages/login/login')
第二種方法： 自動構建路由表
過程也和官網一樣
有一個小提示就是新增vue.config.js和引入uni-read-pages之後一定要重啓！！！因爲我試了好多次以爲自己引入的過程出問題了，結果是因爲沒有重啓，編輯之後也重啓一下。
引入結果就和上面的截圖是一樣的，進入頁面第一次不會觸發路由攔截，不使用this.$Router.**也不會觸發，這裏的問題也可能是我引入的過程有問題，歡迎各位大佬賜教。
完成！
後續引入其他插件也會更新，歡迎期待！