开发思路
思路大纲
搭建uniapp环境
下载HbuilderX选择文件-新建项目，选择uniapp项目，随便命名一个名字安装npm依赖$ npm i hydrogen-js-sdk --save //因为数据添加用到了bmob云数据库，需要安装`hydrogen-js-sdk`npm包
编写业务代码
添加数据(bmob)，后期替换为腾讯云开发数据库
获取第三方小程序推广路径
参考：
创建小程序云开发权限
打通uniapp和小程序云开发
修改manifest.json文件，选择代码模式，添加云数据库的文件夹创建vue.config.js文件，配置代码编写实时编译copy小程序订阅消息发送
申请订阅消息模版，获取模版id获取订阅消息发送的权限编写订阅消息发送的云函数服务小程序订阅消息定时发送
timer上东西
小程序(https://kung-1252408270.cos.ap-chengdu.myqcloud.com/markdown/20201006210437.png )
几个大坑
定时任务不执行的问题
分类专栏
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
}

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.shtml4. 签约产品
类型：签约微信小程序支付产品 ， 签约Native（二维码）支付产品
小程序也属于JSAPI的分支1. 第一步： 进入后台，开通签约5. 回调地址配置1. 第一步：进入产品中心->开发配置2. 第二步：配置回调地址6. 小程序申请注册流程官方网站：http://mp.weixin.qq.com1、第一步：注册在微信公众平台官网首页（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. 第二步：打开微信小程序进入绑定的商户号，点击管理APP3. 第三步：把小程序的appid输入到文本框2 .项目后端1. 项目搭建1. 第一步创建项目2. 第二步：选择依赖包，Finish3. 第三步：配置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-NetworkMusic1. 安装IdeHBuilderX： https://www.dcloud.io/hbuilderx.html2. 创建第一个app1. 文件—>新建—>项目输入项目名称，选择目录，选择模板，点击创建，创建完成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.json1. 微信小程序配置AppID(小程序ID) 获取3. 编译vue.config.js4. 全局配置page.json5. 全局样式uni.scss6. 主组件App.vue7. 入口文件main.js8. 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时不转。其余平台不会转 base644 .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}