微信小程序搭建项目起步

1. 首先需要按照HBuilderX 作为开发工具   下载地址: https://www.dcloud.io/hbuilderx.html

2. 创建项目 文件-->新建--->1.项目--->选择uni-app--->起项目名称---->选择模板uView(根据不同项目组件)--->点击创建

 

 3. 配合manifest.json (需要在微信公众平台申请 已申请: 在开发管理---->开发设置)

 4. 需要再common下面创建request.js(uni.request重新封装), 在config.js里面配置服务器地址

common/config.js

let baseurl = ""
if (process.env.NODE_ENV === 'development') {

    baseurl = '接口调试需要连接的地址'
    
} else {
    // 正'
    baseurl = '发布需要连接的地址'
}
export default baseurl

common/request.js

//服务器地址
import baseUrl from '@/common/config.js'
export default {
    //封装uni.request()：
    request(options) {
        return new Promise((resolve, reject) => {
            //书写异步操作的代码
            uni.request({
                ...options,
                success: (res) => {
                                       //根据接口显示的状态码判断
                    if (res.statusCode !== 200) {
                        return uni.showToast({
                            title: '数据获取失败'
                        })
                    }
                    resolve(res)
                },
                fail: (err) => {
                    uni.showToast({
                        title: '请求接口失败'
                    })
                    reject(err)
                }
            })
    })
},
       get(url, data = {}, options = {}) {
        options.url = baseUrl+ url;
        options.data = data;
        options.method = 'get';
        console.log(options)
        return this.request(options)
    },
    post(url, data = {}, options = {}) {
        options.url = baseUrl+url;
        options.data = data;
        options.method = 'post';
        return this.request(options)
    }
}

5. 在main.js全局引入

import request from '@/common/request.js';
Vue.prototype.$api = request;

6. 使用 page/index.vue

      methods:{
        getApiRequest(){
            //封装uni.request()：前面配置好的服务器地址这里面只需要接口地址
            this.$api.get('接口地址').then(res=>{
                var data = res.data;
            }).catch(res=>{
                //异步操作失败
                console.log(res)
            }).finally(res=>{
                //异步操作完成
            });
        },