之前做过一个picker的三级联动功能,这里分享代码给大家 具体代码: // An highlighted block <template> <view> <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex&quo

注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: flex; flex-direction: row;flex-wrap: wrap;margin: 0 5%;"> <view style="width: 25%;margin-bottom: 16upx;" v-for='(items,indexs) in item.t

uniapp小程序迁移到TS 我一直在做的小程序就是 山科小站 也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能都是比较简单的功能,但是这好不容易实习学到的东西得学以致用,那就继续在小程序上动手吧哈哈.这次实习收获最大倒不是怎么迁移到TS,而是一些组件设计的概念以及目录结构设计上的东西,不过这都是在之后重写组件的时候要做的东西了.回到正题,小程序是用uniapp写的,毕竟还是比较熟悉Vue语法的,这次迁移首先

目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小程序适用的Socket类,具体实现如下. 2,代码实现 class webSocketClass { constructor(url, interval) { this.url = url this.data = null this.isCreate = false // WebSocket 是否创

微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian}}--{{yue}}--{{ri}}</view> <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindt

最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清楚),窗口下滑, 做这个我用的是picker-view这个组件,现在来看一看picker-view的属性: 现在开始写wxml的代码,对了,插一句,我这里是把它写成一个模板的,先看看目录结构 我们先来看看cascade.wxml里的代码: <template name="cascade&quo

最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils文件夹存入arealist.js文件,内容为: const areaList=[ { name:'河南', id:, parentId: },{ name:'浙江', id:, parentId: },{ name:'郑州', id:, parentId: },{ name:'新乡', id:, p

Lilishop B2B2C商城系统 官方公众号 & 开源不易,如有帮助请点Star 所有jar包均可从maven中央仓库下载,无二次封装jar包,全端开源,无后门,无监控. 介绍 官网:https://pickmall.cn Lilishop 是一款Java开发,基于SpringBoot的B2B2C多用户商城,前端使用 Vue.uniapp-app开发 系统全端全部代码开源 商城展示端包含 PC.H5.小程序.APP. 商城包含 会员模块.第三方登录模块.第三方支付模块.楼层装修模块.订单模块

前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝).快应用等多个平台. 1.1 软件安装 创建uni-app有两种,一个是通过 HBuilderX 可视化界

目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线,使用无问题. 2,实现代码 定义canvas <canvas canvas-id="imgCanvas" class="imgCanvas" /> canvas样式 .imgCanvas{ position: absolute; top: -100%; w

发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSelectorQuery().in(this) query.selectAll('#id-selector').boundingClientRect() query.exec(function (res) { console.log(res) }) 这时候res里面就能获取到节点信息了

在小程序开发中,默认底部导航栏很难满足实际需求,好在官方给出了自定义形式,效果如下: 话不多说,直接上代码 1.组件 custom-tarbar.vue文件 <template> <view class="tarbar"> <view class=".tarbar-list" :style="{ background: tabBar.backgroundColor, color: tabBar.color, 'border-t

通过设置navigationStyle, 即自定义导航实现背景全屏 参考文章:  微信小程序 自定义头部导航栏 navigationStyle 代码部分 在page.json中, 加入 "navigationStyle": "custom" , 这是全局的, 单页面的还不知道怎么搞 "globalStyle": { "navigationBarTextStyle": "black", "navig

1.授权按钮: <view> <button class='login-btn' type='primary' @click="bindGetUserInfo"> 授权登录 </button> </view> 2.事件方法: <script> export default { data() { return { nickName: null, //昵称 avatarUrl: null, //头像 isCanUse: uni.g

程序中利用多级字典来存储三级菜单, 通过一系列while循环和for循环,实现了三级菜单的查询,选择,退回上级菜单,退出程序几个功能. 缺点:程序语句过于重复,效率低. #-*-coding:utf-8-*- date={ '北京':{ '昌平区':{ '沙河':['oldboy','test'], '通天苑':['链家地产','我爱我家'] }, '朝阳区':{ '望京':['奔腾','默默'], '国贸':['CICC','HP'], '东直门':['Advent','飞信'] }, '海定

根据左侧列表,联动跳右侧内容. 效果如图: wxml代码: <view class="page"> <!-- 左侧导航 --> <view class='tui-fixed-left'> <scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation

<!-- 搜索 --> <view class="search"> <input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input> <image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image> <

<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"> </view> data() { return { flag: 0, text: '', lastX: 0, lastY: 0 } } methods: { handletouchmo

(1)新建组建:编辑器右击 新建组建 (2)传值 <template> <view class="myRankingList"> <block v-for="(item, index) in list" :key="index"> <view> 内容 </view> </block> </view> </template> <script>

微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 | Coding 开发文档 开发文档 微信公众平台 · 小程序文档 微信公众平台 | 小程序 小程序介绍 小程序设计 小程序开发 - 简易教程· 小程序 小程序运营 简易教程· 小程序(非官方) | 项目地址 微信小程序设计指南 微信小程序平台运营规范 WeUI 微信官方设计团队为微信Web开发量

wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 授权成功 wx.saveImageToPhotosAlbum({ filePath: that.data.tempFilePath, success() { app.func.setMask({ message: '图片保存成功', bg: 'success' }, that) return } }) }, fail:function(){ // 授权失败 wx.show