uni-app使用命令行搭建框架并引入uni-simple-router及uni-request

大家都知道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.**也不会触发，这里的问题也可能是我引入的过程有问题，欢迎各位大佬赐教。

完成！

后续引入其他插件也会更新，欢迎期待！