Skip to content

Commit

Permalink
add new feature: custom addresses by user
Browse files Browse the repository at this point in the history
  • Loading branch information
xxx committed Nov 28, 2022
1 parent d61d0b0 commit 16c7985
Show file tree
Hide file tree
Showing 16 changed files with 334 additions and 1,576 deletions.
31 changes: 0 additions & 31 deletions .eslintrc.js
View file

This file was deleted.

41 changes: 31 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,48 @@
## 微信小程序：随申码

随申码是目前开发、优化较为成熟的一款小程序app。
其在近两年的大规模测试中运行稳定，且在UI设计、并发性能、功能实现等方面可圈可点。
随申码是目前开发、优化较为成熟的一款小程序 app。
其在近两年的大规模测试中运行稳定，且在 UI 设计、并发性能、功能实现等方面可圈可点。
在各省份的健康码程序中也是独树一帜的一款产品。

本仓库代码仅供热爱小程序开发的小伙伴们参考交流。
本仓库代码仅供热爱小程序开发的小伙伴们参考交流，其中所包含的二维码、logo 以及个人信息都来自网络，如若用于非法用途，本人保留依法追责的权利。

如若用于非法用途，本人保留依法追责的权利。
## 该小程序可以做什么：

## 说明
1. 小程序形态的高仿随申码界面
2. 最多支持 4 个自定义地址（界面左滑打开地址选择界面）
3. 支持地址记忆功能，只需设置一次，无需重复输入地址。
4. 只需 1 人在本地编译然后上传开发版和体验版，即可支持最多 30 人使用（无需将小程序提交线上审核，没有审查风险）

使用本代码进行开发需要申请appid, 然后将其替换掉代码中的“xxxxx”:
# 小程序界面展示：

![图片](./readme/appid.png)
基础界面：
![图片](./readme/5.jpg)
最多支持自定义 4 个地址：
![图片](./readme/6.jpg)

# 30 分钟内在自己的手机上复现:

## Show
小程序一旦提交上线必然会被高压管控、禁封。为了能够影响到更多人，只建议用户选择最安全隐蔽的方式：在本地编译小程序并上传到手机。这种方法只允许开发者或者体验者使用该小程序。

![图片](./readme/index.png)
> 需要工具： 一台笔记本，一个手机
![图片](./readme/input_address.png)
## A.准备工作：

- 使用本代码进行开发需要申请微信小程序 appid，小程序注册网址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

> 注意，由于本小程序仅仅用于个人用途，最终仅在本机保留开发版或体验版小程序，不需要提交至平台审核或者上线，因此无需担心小程序因挑战专制暴政而被审查。
- 下载[微信小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，这是一个微信官方推出的代码编辑器，界面和功能十分类似于 vscode。

## B.本地运行

1. 将代码包下载到本地，然后使用编辑器打开
使用注册得到的 appid 替换`project.config.json`文件中的`appid: “xxxxx”`，点击编辑器界面上方的`编译`按钮，并打开编辑器左上方的`模拟器`以及`调试器`。顺利的话，此时应该可以在本地运行代码了。
2. 接着点击编辑器上方的预览，选择相应的设置，即可在手机上进行调试。
3. 点击编辑器界面右上角的上传按钮，然后在[小程序管理页面](https://mp.weixin.qq.com/)查看并管理您的小程序。再次声明，本代码只建议开发者在本人手机上调试使用，请不要提交上线审核。

## 结语

最后，附上个人最喜欢的一段台词：

> 有时候, 斗争似乎希望渺范。孤独, 迷茫, 面对庞然大物的敌人, 但记住, 自由是一个纯粹的理念, 它自然发生, 不需要指导。随机的反抗行为 在银河系全境不断发生, 数不清的战士们还不知道, 他们早已加入这项事业, 起义的战线无处不在, 哪怕最小的反抗, 也会推动我们的战线向前发展。还要记住, 帝国丧心病狂, 渴望控制一切, 因为它违背自然规律, 暴政需要持续的维护, 就像堤坝会开裂漏水, 权威是脆弱的, 压迫的背后是恐惧, 记住这一点。要知道, 总有一天, 这些零星的冲突和战斗, 这些反抗将汇成洪流, 冲垮帝国的权威, 之后便一发不可收拾, 只要最后一击就可以推倒高墙。记住这一点, 竭尽全力。一一星战剧安多第一季第 十二集
78 changes: 19 additions & 59 deletions pages/index/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,30 @@
// pages/index_address/index_address.js
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
var util_s = require('../../utils/util_s.js');
const app = getApp();
Page({
data: {
title: "",
address: "",
touchx: 0,
touchy: 0,
default_address:true
},
title: "",
address: "",
touchx: 0,
touchy: 0,
default_address: true
},

onLoad: function (options) {
// const query = wx.createSelectorQuery()
// query.select('#myQrcode')
// .fields({
// node: true,
// size: true
// })
// .exec((res) => {
// var canvas = res[0].node

// // 调用方法drawQrcode生成二维码
// drawQrcode({
// canvas: canvas,
// canvasId: 'myQrcode',
// width: 200,
// height:200,
// padding: 30,
// background: "#FFFFFF",
// foreground: '#09BC68',
// text: '个人二维码信息',

// })
// wx.canvasToTempFilePath({
// canvasId: 'myQrcode',
// canvas: canvas,
// x: 0,
// y: 0,
// width: 200,
// height: 200,
// destWidth: 200,
// destHeight: 200,
// success(res) {
// console.log('二维码临时路径：', res.tempFilePath)
// },
// fail(res) {
// console.error(res)
// }
// })
// })

var that = this;
// get init brightness
wx.getScreenBrightness({
success: function (res) {that.setData({ScreenBrightness: res.value})}
})
wx.setScreenBrightness({value: 1})
success: function (res) { that.setData({ ScreenBrightness: res.value }) }
})
wx.setScreenBrightness({ value: 1 })
// update time every second
setInterval(function () {
that.setData({
Time: util_s.formatTime(new Date()),
Time_s: util_s.formatTime_s(new Date())
});
});
}, 1000);
},
},

// 记录触摸起点
touchStart(e) {
Expand All @@ -83,17 +43,17 @@ Page({
if (x - that.data.touchx > 50 && Math.abs(y - that.data.touchy) < 50) { //右滑
turn = "right"
} else if (x - that.data.touchx < -50 && Math.abs(y - that.data.touchy) < 50) { //左滑
turn="left";
turn = "left";
}
//根据方向进行操作
if(turn == 'left'){
wx.navigateTo({
url: '../index_adress/index_adress',
}) ;
if (turn == 'left') {
wx.navigateTo({
url: '../index_adress/index_adress',
});
}
},
},
// set brightness to init
onUnload: function () {
wx.setScreenBrightness({value: this.data.ScreenBrightness})
onUnload: function () {
wx.setScreenBrightness({ value: this.data.ScreenBrightness })
},
})
151 changes: 73 additions & 78 deletions pages/index/index.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,79 @@
<view class="content" bindtouchstart="touchStart" bindtouchend="touchEnd">
<text style="color: white;margin-top: 100rpx;">随申码</text>

<view class="container" style="height: 70%; margin-top:20rpx">

<image style="width:100%;height:60rpx;" src="../../img/head.jpg" />
<image style="width:130rpx;height:130rpx;margin:25rpx" src="../../img/logo_text.jpg" />
<image style="width: 140rpx; height: 35rpx; margin: 10rpx" src="../../img/name.jpg" />
<image style="width: 260rpx; height: 60rpx; margin: 10rpx 0rpx 30rpx 0rpx" src="../../img/relatives.jpg" />

<view class="time_content">
<view class="cur_time">{{Time}}</view>
<view class="cur_time_s" style="position: relative; left: 0rpx; top: 2rpx">{{Time_s}}</view>
</view>

<image style="width:380rpx;height:380rpx;" src="../../img/qr_code.jpg" />
<!-- <canvas type="2d" style="width: 200px; height: 200px;margin-top: 0rpx; " id="myQrcode"></canvas> -->

<text style="font-size: 40rpx;font-weight: bold;color: #19B66E;margin:5rpx" >绿色</text>
<!-- 默认显示内容 -->
<view wx:if="{{default_address}}" style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20rpx;">
<text style="font-size: 30rpx;font-weight: bold;color: #846654;margin:5rpx" >已支持刷公交、医保</text>
<button class="capsule_button" style="width: 130rpx; height: 56rpx; display: block; box-sizing: border-box; padding: 8rpx;margin:5rpx">去配置</button>
</view>

<view wx:if="{{!default_address}}" class="address_block" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 20rpx;">
<text class="address_title" >{{title}}</text>
<text class="address_info" >{{address}}</text>
</view>



<view style="display: flex; flex-direction: row; align-items: flex-end; justify-content: center; width: 550rpx; height: 90rpx; box-sizing: border-box;margin-bottom: 30rpx;">
<text style="font-size: 75rpx; font-weight: bold; color: #19B66E; margin: 0rpx; position: relative; left: -4rpx; top: 10rpx" >24</text>
<text style="font-size: 30rpx;margin:0rpx">小时内核酸检测结果</text>
<text style="font-size: 30rpx;font-weight: bold;color: #19B66E;margin:0rpx" >【阴性】</text>
</view>
<text style="color: white;margin-top: 100rpx;">随申码</text>

<view class="container" style="height: 70%; margin-top:20rpx">

<image style="width:100%;height:60rpx;" src="../../img/head.jpg" />
<image style="width:130rpx;height:130rpx;margin:25rpx" src="../../img/logo_text.jpg" />
<image style="width: 140rpx; height: 35rpx; margin: 10rpx" src="../../img/name.jpg" />
<image style="width: 260rpx; height: 60rpx; margin: 10rpx 0rpx 30rpx 0rpx" src="../../img/relatives.jpg" />

<view class="time_content">
<view class="cur_time">{{Time}}</view>
<view class="cur_time_s" style="position: relative; left: 0rpx; top: 2rpx">{{Time_s}}</view>
</view>

<image style="width:380rpx;height:380rpx;" src="../../img/qr_code.jpg" />
<!-- <canvas type="2d" style="width: 200px; height: 200px;margin-top: 0rpx; " id="myQrcode"></canvas> -->

<text style="font-size: 40rpx;font-weight: bold;color: #19B66E;margin:5rpx">绿色</text>
<!-- 默认显示内容 -->
<view wx:if="{{default_address}}" style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20rpx;">
<text style="font-size: 30rpx;font-weight: bold;color: #846654;margin:5rpx">已支持刷公交、医保</text>
<button class="capsule_button" style="width: 130rpx; height: 56rpx; display: block; box-sizing: border-box; padding: 8rpx;margin:5rpx">去配置</button>
</view>

<view class="container" style="height:15%;margin-top: 30rpx;">
<!-- bottom icon and name -->
<view style="display:flex;flex-direction:row;margin-top: 40rpx;">
<view style="display:flex;flex-direction:column;align-items: center;margin-right:60rpx">
<image style="width:80rpx;height:80rpx;" src="../../img/vaccines.jpg"/>
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx" >疫苗&核酸</text>
</view>

<view style="display:flex;flex-direction:column;align-items: center;margin-right:60rpx">
<image style="width:80rpx;height:80rpx;" src="../../img/acq_point.jpg"/>
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx" >采样点</text>
</view>

<view style="display:flex;flex-direction:column;align-items: center;margin-right:60rpx">
<image style="width:80rpx;height:80rpx;" src="../../img/query.jpg"/>
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx" >抗原查询</text>
</view>

<view style="display:flex;flex-direction:column;align-items: center;">
<image style="width:80rpx;height:80rpx;" src="../../img/travel_card.jpg"/>
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx" >行程卡</text>
</view>
</view>

<!-- dot image -->
<image style="width:70rpx;height:16rpx;" src="../../img/dot.jpg" />

<!-- bottom words -->
<view style="display: flex;flex-direction: row;">
<text class="bottom_text">常见问题</text>
<text class="bottom_text">|</text>
<text class="bottom_text">智能客服</text>
<text class="bottom_text">|</text>
<text class="bottom_text">扫码记录</text>
<text class="bottom_text">|</text>
<text class="bottom_text">我要申诉</text>
</view>


</view>

</view>
<view wx:if="{{!default_address}}" class="address_block" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 20rpx;">
<text class="address_title">{{title}}</text>
<text class="address_info">{{address}}</text>
</view>

<view style="display: flex; flex-direction: row; align-items: flex-end; justify-content: center; width: 550rpx; height: 90rpx; box-sizing: border-box;margin-bottom: 30rpx;">
<text style="font-size: 75rpx; font-weight: bold; color: #19B66E; margin: 0rpx; position: relative; left: -4rpx; top: 10rpx">24</text>
<text style="font-size: 30rpx;margin:0rpx">小时内核酸检测结果</text>
<text style="font-size: 30rpx;font-weight: bold;color: #19B66E;margin:0rpx">【阴性】</text>
</view>
</view>

<view class="container" style="height:15%;margin-top: 30rpx;">
<!-- bottom icon and name -->
<view style="display:flex;flex-direction:row;margin-top: 40rpx;">
<view style="display:flex;flex-direction:column;align-items: center;margin-right:60rpx">
<image style="width:80rpx;height:80rpx;" src="../../img/vaccines.jpg" />
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx">疫苗&核酸</text>
</view>

<view style="display:flex;flex-direction:column;align-items: center;margin-right:60rpx">
<image style="width:80rpx;height:80rpx;" src="../../img/acq_point.jpg" />
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx">采样点</text>
</view>

<view style="display:flex;flex-direction:column;align-items: center;margin-right:60rpx">
<image style="width:80rpx;height:80rpx;" src="../../img/query.jpg" />
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx">抗原查询</text>
</view>

<view style="display:flex;flex-direction:column;align-items: center;">
<image style="width:80rpx;height:80rpx;" src="../../img/travel_card.jpg" />
<text style="font-size: 24rpx;font-weight: bold;margin:10rpx">行程卡</text>
</view>
</view>

<!-- dot image -->
<image style="width:70rpx;height:16rpx;" src="../../img/dot.jpg" />

<!-- bottom words -->
<view style="display: flex;flex-direction: row;">
<text class="bottom_text">常见问题</text>
<text class="bottom_text">|</text>
<text class="bottom_text">智能客服</text>
<text class="bottom_text">|</text>
<text class="bottom_text">扫码记录</text>
<text class="bottom_text">|</text>
<text class="bottom_text">我要申诉</text>
</view>


</view>

</view>
Loading

0 comments on commit 16c7985

Please sign in to comment.