基于vue的微信小程序开发

一.脚手架搭建项目
1.创建项目(使用github上的uni-app远程预设选项)

vue create -p dcloudio/uni-preset-vue project

2.启动项目

npm run dev:mp-weixin

3.微信小程序开发者工具导入项目

4.可使用如下开发方式
微信开发者工具仅用于调试程序运行情况，将项目导入Idea，使用Idea对程序代码进行编辑即可。

5.导入uni-ui组件库

npm install @dcloudio/uni-ui

具体使用方式见官方文档： https://www.npmjs.com/package/@dcloudio/uni-ui

注：使用uni-ui需要安装sass依赖，安装方式：

npm install sass-loader node-sass

二.导航栏设置
导航栏设置位置位于pages.json文件内，以下为导航栏设置样例，设置完毕后将自动生成位于底部的导航栏

"tabBar":{
	"backgroundColor":"#fff",
	"position":"bottom",
	"borderStyle":"black",
	"selectedColor":"#fff",
	"list":[
		{
			"text":"temp",
			"pagePath":"pages/temp/temp",
			"iconPath":"./static/icon/_home.png",
			"selectedIconPath":"./static/icon/home.png"
		},
		{
			"text":"index",
			"pagePath":"pages/index/index"
		}
	]
}

三.使用uni-api发起网络请求
使用uni.request发起网络请求与使用axios进行网络请求语法完全一致

onLoad(){
            uni.request({
                url:"http://localhost/index"
            }).then(res=>{
                console.log(res);
            })
        }

扩展：由于uni-api的网络请求与wx自带的网络请求无法方便地显示正在加载图像，因此可自行封装网络请求模块，封装过程如下：
1.新建utils文件夹，并在其下建立request.js文件，在文件内添加如下代码

export default (params)=>{
    //加载中
    uni.showLoading({
        title:"加载中"
    })

    return new Promise(((resolve, reject) => {
        wx.request({
            ...params,
            success(res){
                resolve(res.data);
            },
            fail(err){
                reject(err);
            },
            complete(){
                uni.hideLoading();
            }
        })
    }))
}

2.在main.js中挂载request.js中的request

import request from "./utils/request";
Vue.prototype.request=request;

3.在.vue文件内发起网络请求

this.request({
                url:"http://localhost/index"
            }).then(res=>{
                console.log(res);
            })

结尾：音乐推荐