文章目录

• 前言
• 一、注册小程序
• 二、项目创建
• 三、运行项目
• 四、其他配置
• 最后

---

前言

此次项目开发使用uniapp和uview进行开发，需要用到的开发工具为HBuilder X 和微信开发者工具，具体的安装方式见官网，小程序注册见微信公众平台。

---

一、注册小程序

1. 注册
   在微信公众平台注册小程序，按照提示注册完后会发配一个appid和密钥，需要复制保存好。
2. 完善信息
   设置=>基本设置，填写小程序基本信息，包括名称、头像、介绍及服务范围等。第三方设置根据开发需求添加插件授权。
3. 成员管理
   管理=>成员管理，点击编辑或下拉选择添加成员，输入微信号添加新的项目成员，只有成员可以进行真机测试。体验成员可以使用发布的体验版。
4. 开发设置
   开发=>开发管理=>开发设置，在这里可以查看小程序的appid和密钥，密钥不能明文显示，如果重置需要跟前后端人员说明并在代码中进行修改；服务器域名配置小程序相关域名（备案https）；
5. 版本管理
   管理=>版本管理，在开发工具上传代码后，管理员在小程序管理后台进行版本管理。选择版本进行审核。

二、项目创建

1. 文件=>新建=>项目，选择默认版本，填写项目名称。
2. 引入uview组件。

①根目录下打开终端（shift+鼠标右键） 输入代码 npm install uview-ui，安装成功后回出现一个名字为node_modules的文件夹出现在项目中。

②在main.js文件引入全局uView。

import uView from 'uview-ui'
Vue.use(uView)
//使用rpx
uni.$u.config.unit = 'rpx'

③在uni.scss 中引用 @import ‘uview-ui/theme.scss’。

④在pages.json配置easycom组件模式，与pages同级。

"easycom": {
    // npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

3. 在manifest.json文件=>微信小程序，填写微信小程序 appID，需要在微信公众平台注册微信小程序才能得到。

三、运行项目

1. 在微信开发者工具开启服务端口
   设置 => 安全设置 => 安全 开启服务端口
2. 运行
   Hbuilderx点击运行=>运行到小程序模拟器，点击第一个微信开发者工具就可以在Hbuilderx自动编译（生成unpackage文件夹），成功之后会自动打开微信开发者工具。如果失败可以检查运行设置有没有微信开发者工具的地址，没有就手动导入。
   手动导入：运行=>运行到小程序模拟器=>运行设置，在小程序运行配置指定微信开发者工具的安装路径。

四、其他配置

1. 底部导航
   tabBar与pages和globalStyle同级，第一个为pages的第一个页面一般为启动页，globalStyle可以写一些全局配置，比如头部标题颜色、内容、背景颜色等。

"tabBar": {
	"selectedColor": "#007aff", //底部选中颜色
	"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
			// "iconPath":"static/c1.png",
			// "selectedIconPath":"static/c2.png"
		},
		{
			"pagePath": "pages/user/user",
			"text": "我的"
		}
	]
},

2. 请求
   新建一个文件夹用来放请求方法，命名符合规范就行，如下图所示。
   

⚪ url.js用来导出请求地址

 const baseUrl={
	 primaryUrl : '',//测试地址
	
}
module.exports = baseUrl.primaryUrl

⚪ https.js用来封装全局请求方法，引入前面导出的地址

// 封装请求
import baseUrl from './url.js'
console.log(baseUrl)
export function https(config) {
	//显示loading
	wx.showLoading({
		title: '加载中...'
	});
	//console.log(config)
	
	//检查缓存中有没有token
	var token = uni.getStorageSync('token');
	if (token != '') {
		config.header.Authorization = token
	}
	config.url = baseUrl + config.url; // 请求地址
	let promise = new Promise(function(resolve, reject) {
		uni.request(config).then(res => {
			//console.log("e",res)
			if (res[1].statusCode == 401) {//token过期跳到登录页面
				uni.removeStorageSync('token');
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
			if (res[0]) {
				uni.showToast({
					title: "数据获取失败",
					icon: "error",
					duration: 1500
				})
				uni.hideLoading() //隐藏loading
				resolve(false);
			} else {
				let data = res[1].data;
				if (data.code == 1) {
					resolve(data);
				} else {
					resolve(data);
				}
				uni.hideLoading() //隐藏loading
			}
		}).catch(error => {
			uni.hideLoading() //隐藏loading
			reject(error);
		})
	})
	return promise
}

⚪request.js引入前面封装好的https.js，写入请求类，按照项目需求我写了get和post两种，写完之后记得导出。

import {https}  from '@/api/https.js';    // 引入封装好的https    
class request{
    async postFun(url,data,header={}, responseType) {
        const res = await https({
            method: "post", // 请求方式
            url:url, // 请求url
            data: data,// 参数
			header,
			responseType
        })
        return res
    };
	async getFun(url,data,header={}, responseType) {
	    const res = await https({
	        method: "get", // 请求方式
	        url:url, // 请求url
	        data: data,// 参数
			header,
			responseType
	    })
	    return res
	};
	
}
export default new request()

⚪在api里面新建一个文件夹，用来存放各个页面或者全局工具类。
■ index.js我用来导出所有模块，写完后在main.js中全局引入。

// 统一导出所有模块
const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {//循环寻找当前目录下的js文件，除了本身
	if (key === './index.js') return
	const _key = key.match(/\/(\S*)\./)[1]
	const item = files(key)
	modules[_key] = item.default
})

const install = Vue => {
	Vue.prototype.$api = modules
}

export default install

//main.js
import api from './api/api/index.js'
Vue.use(api)
console.log(Vue.prototype.$api)

后面的文件根据自己的需求新建js来写请求方法，记得引入request.js文件，例如：

import request  from '@/api/request.js'; 

class manage{
	 async getList(data){//获取列表
		const res=await request.postFun('url',data)
		return res
	 };	 
}
export default new manage();

最后在页面使用，this.$api是使用全局导入的index.js，manage是和index同一目录下的manage.js文件，getList是manage.js里面的写的请求方法。

getList() { //获取列表
		this.$api.manage.getList({
			current: this.current,
			size: 7
			}).then((res) => {
				console.log(res)
			})
},

最后

此文章为日常工作学习记录，如有错误请大家多多指出，有更好的方法也欢迎评论区分享~