![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
文章平均质量分 50
小曲曲
这个作者很懒,什么都没留下…
展开
-
文生图项目总结
采用父盒子 flex:center,内层盒子居中显示:横图可以,超高竖图顶部会有遮挡;所以判断竖图就定义宽90%,高度auto根据图片比例动态计算宽高,动态设置内层盒子的宽高;盒子里放图片和文字假如是9:16 的图片,固定一个高度,计算固定宽度;其他比例宽度为手机屏幕宽度,高度计算。原创 2024-02-28 10:48:44 · 894 阅读 · 0 评论 -
小程序人脸识别—检测人脸图片获取图片
【代码】小程序人脸识别—检测人脸图片获取图片。原创 2023-12-15 11:15:07 · 619 阅读 · 0 评论 -
微信小程序上传图片去重——MD5
点击上传图片,根据url生成图片唯一标识hexHash在上传接口给后台接口成功返回给前端存储提交图片时判断hexHash是否重复引入js文件var sMD5 = require('../../utils/spark-md5.js')上传<van-uploader use-before-read max-count="2" bind:before-read="beforeRead" preview-full-image="true" file-list="{{ fileList }原创 2023-05-06 17:10:58 · 897 阅读 · 0 评论 -
小程序的消息提醒——订阅消息
开通订阅消息你可在公共模板库中,选择合适的模板(或者申请新模板,申请新模板须审核后才可使用)。在小程序中融入提示用户开通订阅功能申请发送订阅消息,需要用户手动在小程序进行触发。将订阅消息的触发设计到小程序的交互流程中,用户点击后,才能触发订阅申请弹窗。代码用户点击触发后,下发订阅消息发送申请弹窗用户勾选同意下发的模板,点击“允许”后,就可以用该模板进行推送。...原创 2021-12-09 10:24:41 · 3577 阅读 · 0 评论 -
小程序AES加密ECB模式
在线测试工具:https://the-x.cn/cryptography/Aes.aspx加解密方法 /** * aes 加密方法 * data —— 要转化为字符串 */ AesEncrypt(data) { var key = "1234123412341234"; var keyHex = CryptoJS.enc.Utf8.parse(key); var encrypted = CryptoJS.AES.encrypt(data, keyHex,原创 2021-10-29 17:24:47 · 2978 阅读 · 1 评论 -
微信小程序udp通信连接硬件设备配网
<view> <view class="mtb-100 plr-32"> <view class="bold">配网说明</view> <view class="gray-3 mt-20">连接设备的提供的热点,输入wifi信息,即可进入配网。 设备不支持5G网络。</view> </view> <!-- 账号 --> <view class="pd-60"&g.原创 2021-09-27 18:21:58 · 2496 阅读 · 1 评论 -
blob数据转ArrayBuffer转字符串
npm i pako import pako from "pako"; ws.onmessage = function(res) { console.log("blob类型数据: " + res.data); //blob let reader = new FileReader(); reader.readAsArrayBuffer(res.data, "utf-8"); reader.onload = ..原创 2020-09-28 10:06:21 · 1312 阅读 · 0 评论 -
微信小程序签到——获取位置授权
import {wxp} from '../../../utils/index' // 点击签到——客户授权——调取签到接口 sign(){ // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope let _this = this wxp.getSetting({ success(res) { if (!res.authSetting['scope.userLocation'])原创 2021-06-24 17:06:56 · 1479 阅读 · 0 评论 -
小程序公共样式less封装
theme.less// less变量@black: #000;@white: #fff;@gray-1: #333;@gray-2: #666;@gray-3: #999;@gray-4: #eee;@gray-5: #f8f8f8;@red: #E91010;@yellow:#FB8D32;@blue: #2E93FF;// border@border-color: @gray-4;@border-width-base: 1rpx;flex.wxss .r.原创 2021-06-18 16:32:45 · 445 阅读 · 0 评论 -
小程序架构搭建
1、新建小程序小程序管理工具——新建小程序2、装包vantcomputedstoreaxiosnpm i @vant/weapp -S --productionnpm install --save miniprogram-computednpm install --save mobx-miniprogram mobx-miniprogram-bindingsnpm install axios构建npm(设置使用npm模块)3、vant配置将 app.json 中的 “s原创 2021-06-16 16:28:48 · 1107 阅读 · 0 评论 -
小程序中axios的使用
axios简介Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中axios-miniprogram-adapteraxios的小程序适配器,支持微信、支付宝、钉钉、百度小程序支持TypeScript使用方法npm i axios axios-miniprogram-adapter工具->构建npm引入//http.jsimport axios from 'axios'import mpAdapter from 'axios-minipro原创 2021-06-16 16:14:22 · 11876 阅读 · 3 评论 -
微信小程序版本自动更新问题
公司的小程序项目上线, 后期还会有小型的版本迭代. 为了让用户能在我们进行版本迭代后及时使用最新版本的功能. 做了以下优化…知识点1: 当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。知识点2: 小程序的启动分为"冷启动" 和 “热启动”。热启动是指: 小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前原创 2021-05-17 09:44:13 · 1785 阅读 · 0 评论 -
小程序中以及vue中mock使用——mockjs
微信开发工具mock的使用当接口调不通或者没数据时候,可以造假数据,页面就可以正常写逻辑vuenpm install mockjs// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1 }]}原创 2021-04-11 20:57:10 · 1280 阅读 · 1 评论 -
uniapp支付大全
H5微信支付(jsAPI)bug1:H5的jsAPI需要先授权,获取code,才能获取支付参数,在授权时报redirect_uri参数错误url必须是线上地址url需要编码需要在公众号后台配置网页授权域名bug2:当前页面的URL未注册https://ddcity.brt999.com/h5/在微信支付商户平台,jsAPI支付配置添加 url:https://ddcity.brt999.com/h5/app微信支付bug:支付失败:签名不对应微信开放平台关联ap.原创 2021-01-21 10:44:44 · 1013 阅读 · 1 评论 -
vue上传图片formdata
diyimport http from '@/utils/http';import lrz from 'lrz';export const upImage = async file => { const { formData } = await lrz(file); return http.post('/common/uploadali', formData, { headers: { 'Content-Type': 'multipart/form-data' } });.原创 2020-09-25 11:19:09 · 1964 阅读 · 0 评论 -
首页弹屏
已知活动结束时间和每天次数// 首页弹屏 show_actpop() { let { activity_paly: { activity_paly_num, end_time }, } = this.data let now = new Date().getTime() / 1000 let maxTime = wx.getStorageSync('indexpop').maxTime || '' // 24小时周期结束时间原创 2020-07-21 12:00:40 · 143 阅读 · 0 评论 -
小程序和公众号页面加载动画和无网络状态显示
小程序通过每个页面加组件的方式组件loading.vue<config> { "component":true, "usingComponents": { } }</config><template lang="wxml"> <view class="vh100"> <block wx:if="{{showLoad}}"> <view class="load flex fle.原创 2020-07-15 15:18:45 · 896 阅读 · 0 评论 -
小程序自定义头部组件
在app.js中动态获取顶部高度/* eslint-disable no-unused-vars */import { wxp, http } from './utils/index'import { store } from './store/index'import log from './utils/log'App({ onLaunch(options) { // 导航栏总高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 // iOS 胶囊按钮.原创 2020-06-30 17:47:20 · 7103 阅读 · 0 评论 -
小程序回到顶部
<!-- 回到顶部 --><image src="https://file.lojangcc.com/weapp/common/hm-top.png" hidden="{{showTotop}}" bindtap="toTop" class="totop"/>// 获取滚动条当前位置 onPageScroll: function (e) { if (e.scrollTop > 300) { this.setData({原创 2020-06-24 16:40:52 · 137 阅读 · 0 评论 -
小程序活动倒计时及时间格式化
距离开始大于1天,显示开始时间,未开始(一天内)和 进行中展示倒计时 <view class="state-time"> //state 0 距离开始大于1天 1 未开始(一天内) 2 进行中 3 已结束 <block wx:if="{{state==1||state==2}}"> <image class="state" src="/images/new-state{{state}}.png"/> <!--.原创 2020-06-04 15:54:06 · 749 阅读 · 0 评论 -
小程序使用vant上拉加载和下拉刷新
<view class="list min100 bg"> <view class="item mg-16 bg-white" wx:for="{{list}}" data-id="{{index+3}}" bindtap="toIndex"> <image class="item-img w100" src="/images/new-bg.png" /> <view class="pro pd-24"> <原创 2020-06-04 10:24:48 · 3221 阅读 · 2 评论 -
小程序,多商品多规格同时购买
流程解说1、点击立即领取,如果没有领取资格,弹窗去邀请海报2、有邀请资格,点击立即邀请,商品列表会显示复选框3、点击某个商品选框时,弹出该商品的规格弹窗,选择规格,然后确定4、选好多件商品后,立即领取<config> { "usingComponents": { "van-popup": "@vant/weapp/popup/index", "wxml-to-canvas": "wxml-to-canvas" }, "navigationBarTitl原创 2020-06-03 18:00:33 · 830 阅读 · 0 评论 -
小程序上传多张图片
//html <view class="mb-16 mt-32"> <van-uploader file-list="{{ fileList }}" max-count="5" bind:after-read="afterRead" preview-size="60" bind:delete="del" /> <view c.原创 2020-05-25 10:47:10 · 675 阅读 · 0 评论 -
小程序长按二维码跳转另一个小程序
//小程序二维码长按识别,需要用微信预览功能,普通的图片不能长按识别,但是有些手机预览不了wx.previewImage({ urls: [this.data.code], // 需要预览的图片http链接列表})//于是通过vant弹窗组件,方法跳转,也可以使用navigate标签跳转 <van-overlay show="{{ showCode }}" bind:click="onClickHide"> <view class="wrapper w100 h10原创 2020-05-14 15:44:35 · 1473 阅读 · 0 评论 -
小程序下拉刷新
//json文件"enablePullDownRefresh": true /** * 页面相关事件处理函数--监听用户下拉动作 */ async onPullDownRefresh() { // await Promise.all([this.getIndexData(), this.getRecommendList()]) 如果多个初始化接口 await this.onLoad() //重新调初始化接口 wx.stopPullDown原创 2020-05-13 13:53:18 · 423 阅读 · 1 评论 -
小程序promise工具的使用
npm install --save miniprogram-api-promise//新建wxp.jsimport { promisifyAll } from 'miniprogram-api-promise'export const wxp = {}// promisify all wx's apipromisifyAll(wx, wxp) import { wxp, http } from '../../utils/index' wxp.login().then(a原创 2020-05-12 11:26:29 · 1097 阅读 · 0 评论 -
小程序分享海报的生成
文档地址 https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html//HTML<van-popup show="{{ showPoster }}" closeable bind:close="onPosterClose"> <wxml-to-c...原创 2020-04-29 18:46:24 · 1193 阅读 · 0 评论 -
生成随机数——UUID
获取两个数之间的随机数Math.random() *(max - min)+ min从既定数组中随机选取 const area = [ '北京', '上海', '天津', '重庆', '河北', '山西', '吉林', '辽宁', '黑龙江', '陕西', '...原创 2020-04-29 17:23:38 · 1557 阅读 · 0 评论 -
小程序的vuex —— MobX 绑定辅助库
安装//项目安装npm install --save mobx-miniprogram mobx-miniprogram-bindings工具——构建npm创建文件store/index.jsimport { observable, action } from 'mobx-miniprogram'export const store = observable({ // 数据字段...原创 2020-03-25 09:52:22 · 1600 阅读 · 1 评论 -
vue或小程序关于自定义输入金额在提交前的验证——以小程序为例
// 点击立即打赏按钮 dashang() { let money = (this.data.money).trim(); if (!money || !(/^[1-9][0-9]*$/.test(money))) { wx.showToast({ title: '请选择或输入正确的金额', icon: 'no...原创 2019-08-04 19:04:23 · 736 阅读 · 0 评论 -
小程序tab切换
wxml事件不能传参,要使用自定义属性传参<view class="circle"> <!-- tab切换顶部 --> <view class="head"> <ul class="tab flex"> <li class="{{tab==1?'active':''}}" data-...原创 2019-07-25 11:35:04 · 210 阅读 · 0 评论 -
小程序npm使用——以vant-weapp为例
打开项目终端,初始化npm init —— 一直回车,直到出现yes——yes——回车安装包npm i vant-weapp -S --production开发者工具——左上角工具 => 构建npm 这一项,点击进行构建。开发者工具——左上角设置 => 项目设置——勾选使用npm模块...原创 2019-07-29 11:11:45 · 2252 阅读 · 1 评论 -
小程序wxs的使用——处理图片、时间为例
使用场景封装一些公共方法,可以直接在wxml中使用例如后台反的图片是字符串,需要转成数组格式才能渲染创建tools.wxs文件// 处理图片,字符串转为数组格式function getImgArr(img){ if(!img){ return [] }else{ return img.split(',') }}module.exports = { g...原创 2019-08-01 12:11:59 · 1141 阅读 · 0 评论 -
小程序页面跳转及返回总结
1、跳转方式2、wx.navigateTo(Object object)保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。 wx.navigateTo({ url: `/pages/circle_detail/circle_detail?id=${id}` ...原创 2019-08-01 17:07:08 · 9030 阅读 · 0 评论 -
小程序点赞和取消点赞的方法
设置数组某一项的值// 点赞 isLike(e) { console.log(e); let id = e.currentTarget.dataset.id let index = e.currentTarget.dataset.index console.log(index, this.data.list[index]); l...原创 2019-08-01 17:50:25 · 3720 阅读 · 5 评论 -
小程序轮播图带数字序号
// bindchange='onSlideChange' 滑动时触发 <swiper autoplay circular="true" bindchange='onSlideChange'> <!-- <block wx:for="{{imgUrls}}"> --> <swiper-item> ...原创 2019-08-04 15:17:54 · 2734 阅读 · 1 评论 -
小程序监听页面滚动事件,动态设置标题
// 监听页面滚动事件 onPageScroll: function (e) { console.log(e.scrollTop); if (e.scrollTop >= 100) { // 动态设置title wx.setNavigationBarTitle({ title: this.data.title }) ...原创 2019-08-04 15:19:18 · 4278 阅读 · 0 评论 -
小程序的各种弹窗
//test.jsPage({ popSuccessTest: function () { wx.showToast({ title: '成功提示弹窗', icon: '', //默认值是success,就算没有icon这个值,就算有其他值最终也显示success duration: 2000, //停留时间 }) }...原创 2019-08-04 15:29:10 · 34999 阅读 · 3 评论 -
小程序request二次封装
原本用法 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 method:“POST”, data: { }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data)...原创 2019-08-04 15:32:46 · 482 阅读 · 0 评论 -
小程序自定义组件使用及跨级传值
1、创建子组件并引入使用2、父页面向子组件传值父页面中组件标签上直接写需要传递的值<zan num="{{number}}"/>子组件的js中 properties接收Component({ properties: { num: Number, min: { type: Number, 类型 value: 0, ...原创 2019-08-04 18:50:44 · 3562 阅读 · 0 评论