# MockPay
**Repository Path**: luoob/simulated_payment
## Basic Information
- **Project Name**: MockPay
- **Description**: 用于项目中的一个模拟支付功能，使用uniapp开发的小软件和微信小程序，
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-16
- **Last Updated**: 2021-05-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 模拟支付宝
因为比赛提供的软件自己没有办法将加密狗分离。
故这篇文章诞生了。
使用 D-cloud旗下得意产品 `uniapp` 跨平台框架
# 效果图
### `App`
### `小程序`
# 默认高度
>
>
> **uniapp** 导航栏 默认高度：`44px`
>
> **uniapp** TabBar 默认高度：`50px`
>
>
# 得到的经验
## 铺满可视视图
`vue` 页面下使用：
```css
height: 100vh;
```
`nvue` 页面下使用：
```css
flex: 1;
```
## 关于nvue(weex)的那些事
### 布局方式
> 默认是`flex布局`，方向是`纵向`
### 选择器
> 出于性能考虑，**Weex 目前只支持单个类选择器，并且只支持 CSS 规则的子集**。详情请参阅 *[通用样式](https://weex.apache.org/zh/docs/styles/common-styles.html)* 与 *[文本样式](https://weex.apache.org/zh/docs/styles/text-styles.html)*。-- 2020/3/15
## 会渲染成原生组件的组件
## 宝塔面板
配置`ssl`证书
> 不要虚拟域名和证书域名相同也能产生映射关系
虚拟主机：**webApi.com:9000**
SSL证书域名：**www.xxx.xyz** , **xxxx.xyz**
阿里申请的证书：
在面板中
- **key证书** 对应证书`key`
- **pem证书** 对应的是 `public.crt` 和 `chain.crt` 合并的证书（先复制public，后复制chain）-- 全部内容复制
# 下拉刷新
**uniapp** 有自带的下拉刷新，**weex** 也一样，自带下拉刷新。
**uniapp** 只需要在 `page.json` 中配置，然后再在页面组件中编写监听下拉刷新方法即可
**weex** 对应的下拉刷新是使用 `refresh` 组件，然后包含下拉刷新的子组件。
### 区别
`uniapp` 自带下拉刷新，页面不会滚动。`weex` 会随着下拉刷新的动画而滚动。
uniapp
weex
## import 和 export default 的复合写法
export default 的东西，在引入的时候不能使用类似于 `解构` 的方法引入对应的 **属性** 和 **方法**
```js
// a.js
export default {
a:1,
f() {}
}
// b.js
import { a } from './a.js'; // 这是错误的
import module_name from './a.js'； // 这才是正确的
// 复合写法
export a from './a.js'; //这是错的
export { default as a } from './a.js'; // 这才是正确的
export { default as b } from './b.js';
import { a,b } from './index.js'
```
# 手动实现下拉刷新
需要使用三个监听函数：`touchstart` `touchmove` `touchend`
-----
**原理：**
1. 记录刚开始触摸的坐标
2. 触摸移动过程中判断是 `垂直拖动` 还是 `水平拖动`
3. 垂直滚动 --> 判断 `向上` 还是 `向下`
`touchstart`
```js
touchstart(e) {
// 记录开始的坐标点
this.coordinate.x = e.touches[0].pageX;
this.coordinate.y = e.touches[0].pageY;
}
```
`touchmove`
```js
touchmove(e) {
let vm = this;
let touchX = e.changedTouches[0].pageX;
let touchY = e.changedTouches[0].pageY;
let diffX = touchX - vm.coordinate.x;
let diffY = touchY - vm.coordinate.y;
if (Math.abs(diffY) > Math.abs(diffX)) {
// 是下拉行为
if (diffY < 0) {
console.log("上拉");
} else {
// vm.top = diffY*0.3;
console.log('下拉');
}
} else {
console.log('水平拉');
}
}
```
`touchend`
```js
touchend(e) {
this.top = 0;
}
```
# 编写日期 --2020/3/15