uniapp基础知识及项目结构

uniapp基础知识及项目结构

uni小白，简单粗暴，此处只是学习记录，勿喷

一、新建空白的uniapp项目

二、项目注释

三、代码部分(可以直接复制用)

1、config中config.js(配置后台访问路径)

const hostUrl = 'http://ip:端口名/项目名'
export default {
  // 本地持久化存储key
  projectKey: '随便写',
  // api请求地址
  // #ifdef H5
  // H5 环境，配合menifest.json中的devServe配置来解决调试时的跨域问题
  baseUrl: process.env.NODE_ENV === 'development' ? '/dev' : hostUrl,
  // #endif
  baseUrl: hostUrl,
  // 盐
  kSalt: '随便写',
}

2、api中common.js(编写访问的后台接口)

import httpRequest from "./index.js"

export const toLoginByCode = data =>{
	return httpRequest.request({
		url: '/wx/user/wxLogin',
		method: 'get',
		contentType: 'form',
		data
	})
}

3、api中index.js

如需要配置拦截器,可以引入http_request.js等文件，详见3.X 下序号。反之则忽略即可。
拦截器配置文件太多，此处不变编写；如有需要，后期看怎么处理。

import HttpRequest from '../tools/http_request.js';

const httpRequest = new HttpRequest();

export default httpRequest;

4、附上两个获取小程序授权code页面，方便自己测试

开发微信和支付宝小程序，需下载安装对应的开发工具，安装路径配置在HBuiler中
需申请注册对应的小程序，或成为其开发者

4.1、支付宝小程序

<button @click="toAliCode">支付宝code</button>

export default{
	methods:{
		toAliCode(){
				uni.getAuthCode({
					scopes:"auth_user",
					success:(authCode) => {
						console.log("authCode",authCode);
					}
				})
			},
	}
}	

4.2、微信小程序

详细点的可以参考之前写的微信小程序授权登录

onLoad(){
	// 进入页面自动弹出授权登录页面
	// this.authLogin()		
},
authLogin() {
	uni.showModal({
	title: "授权登录",
	content: "是否授权微信小程序登录",
	success: function(res) {
	if (res.confirm) {
	console.log("点击登录");
	//得到供应商
	uni.getProvider({
		service:'oauth',
		success:(res) => {
			//登录
			uni.login({
				provider: res.provider[0],
				scopes: 'auth_user',
				success: async (res) => {
					console.log("userLoginCode",res);
					let code = res.code
					//let mapUser = await  toLoginByCode({
					// 	code : code
					// })
			    })
			},		    

一个在学习的开发者，勿喷，欢迎交流