更新记录
1.0.3(2023-08-05) 下载此版本
支持websocket流式响应。 支持微信小程序和抖音小程序平台。 支持微信支付功能,任务系统,推广系统。
技术: 前端:uniapp uview 后端:PHP mysql
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.0 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
前言
简介: 1.生成二维码。传入链接,即可使用,可快速扫出链接 2.可一个页面生成多个二维码 3.可定义中间图片(头像)
有疑问
微信搜索“AI写作工具旗舰版”小程序,找客服反馈,相应问题。
属性说明
属性 | 类型 | 说明 |
---|---|---|
url | Number | 生成二维码的url链接 |
width | Number | 宽,单位px |
height | Number | 高,单位px |
themeColor | String | 二维码颜色,默认#333333 |
qrcode_id | String | 二维码的id,默认qrcode_id,用于一个页面生成多个码 |
is_themeImg | Boolean | 是否有中间图片(头像等),默认没有 |
themeImg | String | 中间图片地址(可本地图片,可网络图片-微信小程序需配置download域名白名单) |
h_w_img | Number | 图片宽高,单位px |
width_img | Number | 宽,单位px,已弃 |
height_img | Number | 高,单位px,已弃 |
素材
示例项目可直接运行
开始使用
下载源码解压,复制/components
下的组件至项目根目录的 /components
文件夹下
index.vue
的script
加入如下部分:
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
export default {
components: {
ayQrcode,
},
data() {
return {
//二维码相关参数
modal_qr: false,
url: 'https://pixabay.com/images/search/?order=ec', // 要生成的二维码值
}
},
onLoad() {
let that = this;
that.showQrcode();//一加载生成二维码
},
methods: {
// 展示二维码
showQrcode() {
let _this = this;
this.modal_qr = true;
// uni.showLoading()
setTimeout(function() {
// uni.hideLoading()
_this.$refs.qrcode.crtQrCode()
}, 50)
},
//传入组件的方法
hideQrcode() {
this.modal_qr = false;
},
}
}
index.vue
的template
加入如下部分(任选之一):
(1)默认黑色二维码:
<view style="margin: 40upx;">
<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300" />
</view>
(2)定义了颜色的二维码:
<view style="margin: 40upx;">
<ayQrcode ref="qrcode" qrcode_id="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300"
themeColor="#33CCCC"/>
</view>
(3)定义了颜色、中心图片(头像:本地图片)的二维码:
<view style="margin: 40upx;">
<ayQrcode ref="qrcode3" qrcode_id="qrcode3" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300"
themeColor="#dd524d"
:is_themeImg="true"
themeImg="../../static/logo.png"
:h_w_img="40"
/>
</view>
(4)定义了颜色、中心图片(头像:网络图片)的二维码:
<view style="margin: 40upx;">
<ayQrcode ref="qrcode4" qrcode_id="qrcode4" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300"
themeColor="#ddd890"
:is_themeImg="true"
themeImg="https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg"
:h_w_img="40"
/>
</view>