20. Uniapp

1. 微信小程序和微信支付宝绑定

1. PC微信商户号申请操作流程详解

1. 第一步：打开浏览器，搜索【微信支付商户平台】点击进入;

2. 第二步：点击页面右上角的【接入微信支付】-【注册微信支付商户号】;

3. 第三步：点击后会弹出一个窗口，上面有一个二维码，用申请人的手机微信扫描这个二维码后点击【允许登陆】;

在这里要提醒一下大家，刚刚用来扫码的微信账号(也就是注册申请人)会直接被系统默认为商户号的联系人，即超级管理员，后续商户号的运营操作都需要使用这个账号。

4. 第四步：登陆后，页面会自动弹出【创建申请单】，用户根据提示提交相关资料，确认提交后，等待审核。后续可点击【查看申请单】查询审核进度。

2. App手机版微信商户号申请流程

1. 第一步：微信打开【微信支付商家助手】小程序，点击【我的商家】->【成为商家】进入，或打开【微信支付】官方公众号，点击底部菜单栏的【更多】-【收款与经营】-【微信收款商业版】，按照步骤提示申请成为微信收款商业版商家。

2. 第二步：用户依据提示，提交各种注册需要的资料，比如营业执照、身份证等;

3. 第三步：等待商家主体资料审核，用户可通过公众号收到关于申请进展的消息推送，根据页面提示，填写所需的商户资料。

4.　第四步：所有资料审核通过后，签约消息便会推送给用户，点击消息进行在线签约。线上签约完毕后，微信商户号就开通完成啦!

上述就是微信商户号申请流程，只需要根据提示进行资料填写，然后等待审核通过就可以啦!希望这份微信商户号申请流程详解，能帮助你顺利申请成功哦。

3. 账户设置

1. 第一步：下载证书，安装证书

2. 第二步：设置API密匙

写个生成密匙的方法

输入到文本框

3. 第三步：查看开发文档

如果不知道开发流程可以查看开发文档
链接：https://pay.weixin.qq.com/index.php/core/home/login?return_url=/

选择api文档
链接：https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/pages/index.shtml

看着支付类型的文档
链接：https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_1.shtml

4. 签约产品

类型：签约微信小程序支付产品 ， 签约Native（二维码）支付产品

小程序也属于JSAPI的分支

1. 第一步： 进入后台，开通签约

5. 回调地址配置

1. 第一步：进入产品中心->开发配置

2. 第二步：配置回调地址

6. 小程序申请注册流程

• 官方网站：http://mp.weixin.qq.com

1、第一步：注册

在微信公众平台官网首页（http://mp.weixin.qq.com）点击右上角的“立即注册”按钮。

2、第二步：选择注册的帐号类型

选择“小程序”，按着提示填写信息

3、第三步：填写邮箱和密码

 请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。

4、第四步：激活邮箱

登录邮箱，查收激活邮件，点击激活链接。

5、第五步：填写主体信息

点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。选择主体类型：个人和企业。企业的功能要相对多一些。（小程序如果需要接入支付功能,必需进行微信验证）

时会需要你提供一些资料如营业执照、管理员信息登记等，按要求真实提交就好了。

填好的内容必须真实，后期就不能改动了。

6、第六步：微信开发者工具的下载和安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装到指定目录即可

7. 小程序和支付绑定

1. 第一步：打开微信小程序

路径：http://mp.weixin.qq.com
微信支付->绑定商户号

2. 第二步：打开微信小程序进入绑定的商户号，点击管理APP

3. 第三步：把小程序的appid输入到文本框

2 .项目后端

1. 项目搭建

1. 第一步创建项目

2. 第二步：选择依赖包，Finish

3. 第三步：配置pom

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.experimental</groupId>
            <artifactId>spring-native</artifactId>
            <version>${spring-native.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!--微信请求-->
        <dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <dependency>
            <groupId>org.jdom</groupId>
            <artifactId>jdom</artifactId>
            <version>1.1</version>
        </dependency>
        <dependency>
            <groupId>com.thoughtworks.xstream</groupId>
            <artifactId>xstream</artifactId>
            <version>1.4.19</version>
        </dependency>
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>core</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.dataformat</groupId>
            <artifactId>jackson-dataformat-avro</artifactId>
            <version>2.13.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.8.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.5</version>
        </dependency>
        <dependency>
            <groupId>commons-httpclient</groupId>
            <artifactId>commons-httpclient</artifactId>
            <version>3.1</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.74</version>
        </dependency>
        <!--json-->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20140107</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
    </dependencies>

3. Uniapp简介

• 项目推荐：https://github.com/astriddale/Muni-NetworkMusic

1. 安装Ide

HBuilderX： https://www.dcloud.io/hbuilderx.html

2. 创建第一个app

1. 文件—>新建—>项目

输入项目名称，选择目录，选择模板，点击创建，创建完成

2. 运行测试

1. 运行到浏览器

选中项目，点击运行，选择运行方式

第一次运行可能需要编译工具，工具下载完成后，右键点击控制台可重新运行。

运行网页显示

2. 运行到小程序模拟器

选择运行到小程序模拟器，选择微信开发者工具

报错

解决错误，打开微信开发者工具

打开端口

右击控制台，重新运行，成功

3. 初始化相关配置

1. 目录结构

┌─cloudfunctions        云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
    

• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
• HbuilderX1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

2. 应用配置manifest.json

1. 微信小程序配置

AppID(小程序ID) 获取

3. 编译vue.config.js

4. 全局配置page.json

5. 全局样式uni.scss

6. 主组件App.vue

7. 入口文件main.js

8. Uniapp开发规范及资源路径

• 推荐使用绝对路径： / 或者 @/

1. 模板内引入静态资源

template 内引入静态资源，如 image、video 等标签的 src 属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @ 开头的绝对路径以及相对路径会经过 base64 转换规则校验
• 引入的静态资源在非 h5 平台，均不转为 base64。
• H5 平台，小于 4kb 的资源会被转换成 base64 ，其余不转。
• 自 HBuilderX 2.6.6-alpha 起 template 内支持 @ 开头路径引入静态资源，旧版本不支持此方式
• App 平台自 HBuilderX 2.6.9-alpha 起 template 节点中引用静态资源文件时（如：图片），调整查找策* 略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

2. js文件引入

js文件或 script 标签内（包括 renderjs 等）引入 js 文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

注意

• js 文件不支持使用 / 开头的方式引入

3. css引入静态资源

css 文件或 style 标签内引入 css 文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6-alpha）

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

注意

• 自 HBuilderX 2.6.6-alpha 起支持绝对路径引入静态资源，旧版本不支持此方式

css 文件或 style 标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

Tips

• 引入字体图标
• @ 开头的绝对路径以及相对路径会经过 base64 转换规则校验
• 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
• h5平台，小于4kb会转 base64，超出4kb时不转。
• 其余平台不会转 base64

4 .uni-app 生命周期

1. 应用生命周期

1. 演示onPageNotFound

选择page文件夹->右键，新建页面->输入404->点击创建

添加提示代码

• 路径：E:/Uniapp/1.uniapp/pages/404/404.vue
• 代码：

<template>
	<view>
	   <!-- 新添加的提示代码 -->
		<h1>当前页面不存在！</h1>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

pages.json配置页面标题显示

• 路径E:/Uniapp/1.uniapp/pages.json
• 代码

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/404/404",
            "style" :                                                                                    
            {
                 /* 添加页面标题 */
                "navigationBarTitleText": "页面未找到",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

配置声明周期

• 路径：E:/Uniapp/1.uniapp/App.vue
• 代码

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		/* 配置页面未找到 */
		onPageNotFound() {
			uni.navigateTo({
				url:'pages/404/404'
			})
			
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

测试

• 修改编译模式
  
• 把访问路径pages/index/index 改为pages/index/indexs
  
• 点击确定，页面显示
  

2. 页面生命周期

1. 演示onLoad

在404 页面增加两秒后跳转

• 路径：E:/Uniapp/1.uniapp/pages/404/404.vue
• 代码：

<template>
	<view>
		<!-- 新添加的代码 -->
		<h1>当前页面不存在！</h1>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
		let timer =	setTimeout(()=>{
			   clearTimeout(timer)
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},2000)
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

运行显示错误页面

两秒后跳到首页

2. 演示onShow

当页面加载时触发

• 路径：E:/Uniapp/1.uniapp/pages/index/index.vue
• 代码

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onShow() {
			console.log("Index page show")
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

运行

5. Uniapp路由配置及页面跳转

1. 路由配置

2. 组件式跳转

1. 添加跳转组件

路径：E:/Uniapp/1.uniapp/pages/index/index.vue
代码：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<!-- 跳转组件 nav快捷键-->
		<navigator url="../404/404">404页面</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onShow() {
			console.log("Index page show")
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

2. 运行

3.

1. 创建list页面

修改页面内容

• 路径：E:/Uniapp/1.uniapp/pages/list/list.vue
• 代码：

<template>
	<view>
		<text>通讯录</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

2. 创建me页面

修改页面内容

• 路径：E:/Uniapp/1.uniapp/pages/me/me.vue
• 代码：

<template>
	<view>
		<text>我</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

3. 创建页面finder

修改页面内容

• 路径：E:/Uniapp/1.uniapp/pages/finder/finder.vue
• 代码：

<template>
	<view>
		<text>发现</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

4. 修改pages.json

路径：E:/Uniapp/1.uniapp/pages.json