工具X内置相关环境，无需配置下载App开发版

1. 工具

X

内置相关环境，开箱即用，无需配置

下载App开发版，开箱即可使用； 如果您下载标准版，

运行或发布uni-app时，会提示安装uni-app插件，下载插件后才能使用

安装地址

注意：如果是第一次使用，需要配置好小程序的ide的相关路径才可以成功运行。 如下图，需要在输入框中输入微信开发者工具的安装路径。 如果微信开发者工具无法正常启动，需要开发者手动启动，然后将uni-app生成的小程序项目的路径复制到微信开发者工具中，在里面进行开发，就可以看到实时了微信开发者工具效果。

uni-app默认将项目编译到根目录的目录下。

小程序：选择【uni-app】---默认模板 pc：选择【普通项目】---vue项目（vue-cli） 后台管理系统：选择【uni-app】---uni-admin普通页面（单机）页）：选择【常用项目】---html项目

优视

安装步骤

在插件市场搜索uview下载，点击使用X导入插件即可导入uView主JS库。 在项目根目录的main.js中，导入并使用uView JS库。 注意这两行要放在Vue后面

// main.js
import uView from "uview-ui";
Vue.use(uView);

安装scss，在HX菜单工具->插件安装中找到“scss/sass编译”插件，然后安装。 如果不生效，重启HX导入uView的全局SCSS主题文件，导入到项目根目录下的uni.scss这个文件中。引入uView基本样式，注意：在App.vue中第一行引入，付费注意在style标签中添加lang="scss"属性来配置组件模式，该配置需要在项目根目录下的pages.json中进行

2. 框架/语法

简介：使用Vue.js开发所有前端应用程序的框架。 开发者编写一套代码，可以发布到iOS、Web（响应式）、各种小程序（微信/支付宝/百度/今日头条/飞书/QQ/快手/钉钉/淘宝）、快应用等平台

3. 配置

在page.json中配置

配置项中应该出现pages中的第一页，示例如下：

 "tabBar": {
            "color": "#7A7E83",
            "selectedColor": "#3cc51f",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "height": "50px",
            "fontSize": "10px",
            "iconWidth": "24px",
            "spacing": "3px",
            "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "static/tab/icon_index.png",
                "selectedIconPath": "static/tab/icon_index_sel.png",//跳转时的图标
                "text": "首页"
            }, {
                "pagePath": "pages/shop/shop",
                "iconPath": "static/tab/icon_cart.png",
                "selectedIconPath": "static/tab/icon_cart_sel.png",
                "text": "商城"
            },
            {
                "pagePath": "pages/mine/mine",
                "iconPath": "static/tab/icon_my.png",
                "selectedIconPath": "static/tab/icon_my_sel.png",
                "text": "我的"
            }]
        }

工具栏--设置--编辑器配置--启用px转rpx的提示跳转到网页查看设置px转rpx

需要配置appid

在.json中填写微信小程序配置中的appid 在微信开发者工具右上角“详细信息”中的基本信息中填写appid

4、数据接口

请按如下方式进行：

输入命令：

cnpm install uni-ajax

    新建ajax.js
（1）// 引入 uni-ajax 模块
import ajax from 'uni-ajax'
（2）// 创建请求实例
 const instance = ajax.create({
    // 本地测试地址
    // baseURL: 'http://172.1343.0.101:8080',
    // 线上地址
    baseURL: 'https://gindus34324try.zjyqzg.com/prod-api/',
})
（3） // 添加请求拦截器
   instance.interceptors.request.use(
    config => {
        config.header['Authorization'] = 'Bearer ' + uni.getStorageSync("wxUserToken")
        return config
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)
（4） // 添加响应拦截器
//根据业务添加拦截器，以下的业务情况是：当业务需要登录以后才可以查看的，后端就会返回状态码401，就会跳转到登录界面，等登录以后就会跳回刚刚的页面，当状态码为500时，就代表出错了，状态码为200时，就表示已经成功                                                 
 instance.interceptors.response.use(
    response => {
        var currentPath = getCurrentPages()[0].$page.fullPath;
        uni.showLoading({
            title: '加载中'
        })
        if (response.data.code == 401) {
            //没有登录、没有拿到用户数据就跳转到登录页
            uni.navigateTo({
                url:"/pages/home/home"
            })
            
        } else if (response.data.code == 500) {
            uni.$u.toast(response.data.msg);
            uni.hideLoading();
        }
        if (response.data.code == 200) {
            setTimeout(function() {
                uni.hideLoading();
            }, 500);
        }
        // 对响应数据做些什么
        return response.data
    },
    error => {
        // 对响应错误做些什么
        return Promise.reject(error)
    }
)
// 导出 create 创建后的实例
export default instance

 import App from './App'
import ajax from './common/ajax.js'
// #ifndef VUE3
import Vue from 'vue'
import uView from "uview-ui"
Vue.prototype.$ajax = ajax;
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

新建一个api文件夹，示例如下：

 根据页面以及共用接口进行创建
 // 查询大赛详细信息
const matchInfo = '/terminal/applymatchactivity/16';
//下载大赛文档
const downLoadFile = '/terminal/applymatchactivity/downLoad/16';
export {
    matchInfo,
    downLoadFile,
}