前言 好久没写博客了,由于公司业务需要,最近接触uiapp比较多,一直想着输出一些相关的文章.正好最近时间富余,有机会来一波输出了. 问题描述 在使用 uni-app 开发项目时,会遇到需要在 onLaunch 中请求接口返回结果,并且此结果在项目各个页面的 onLoad 中都有可能使用到的需求,比如微信小程序在 onLaunch 中进行登录后取得 openid 并获得 token,项目各页面需要带上该 token 请求其他接口. 问题原因 在onLaunch 中的请求是异步的,也就是说在执行

目录 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 是否创

MINA框架分三个部分 视图层(View):有很多页面,每个页面有wxml和wxss组成的,视图结构和展现样式 逻辑层(App Service):处理事物逻辑的地方以及数据交互的服务中心 系统层(Native):微信客户端的原生能力(微信客户端的功能) 小程序的视图层和逻辑层时双线程通信的,视图层和逻辑层之间,提供了数据传输和事件系统,视图层和逻辑层之间通过JSBrideg进行的 逻辑层把视图变化通知给视图层,然后触发视图层的页面更新: 视图层触发的事件通知给我们逻辑层,逻辑层进行业务处理: 视

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

安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配置 无 JSON 通过以上比对得出,传统web是三层结构.而微信小程序是四层结构,多了一层. 小程序基本目录  配置介绍 小程序包括两种配置:一种是全局配置app.json和页面自己的json文件 注意:配置文件中不能出现注释 全局配置app.json app.json是小程序的全局配置文件,包括小

注:本项目的图片资源来源于后端接口,所以使用的是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

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

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

关键技术点: 作用域问题——回调函数中的作用域已经脱离了调用函数了,因此需要在回调函数外边把this赋给一个新的变量才可以了. 业务需求: 微信小程序开发,业务逻辑需要,需要把获取手机号码的业务逻辑作为检验登录有效性函数的回调函数. 异常描述: 微信小程序开发给data中的变量赋值,出现以下错误: VM1610:1 thirdScriptError Cannot read property 'setData' of undefined;at pages/index/index checkSess

启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明白了. 小程序的首页需要展示用户关注的小区信息,意味着一打开小程序我就得先执行登录的逻辑,只有登录了之后才能获取用户关注的小区信息. 在小程序启动的时候自动登录,目前没获取用户信息,所以不需要用户授权,这个逻辑放在根目录下的app.js的onLaunch方法中.只要启动小程序就会执行onLaunch方法. 做完之后发现了一个很严重的问题,

前言 在部分场景下,需要向小程序的默认接收页(pages/index/index)传递参数. 本文将以传递 name 和 pwd 参数为例,分别介绍此场景在 Android 小程序和 iOS 小程序中的实现过程. 前提条件 已参照 快速开始 文档接入了小程序组件. Android 小程序 1.在客户端添加启动时跳转页面的参数信息.如下所示: Bundle param = new Bundle(); String query = "name="+Uri.encode("123&

前言 本文基于 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 可视化界

先交代备注: 这次有关小程序的分享只有技术的 QA环节,其他如产品.入口.流量.与公众号的整合等等,回答都是暂时无法给出答案或不确定: 小程序最终发布时间官方也还未确定,不过说应该就是近期: 小程序的分享环节不允许录像: 官方不会分享本次小程序的PPT,但是前排同学有拍照,已经统一按顺利放在结尾处,强烈推荐阅读: 图片较多,打开较慢,请有心理准备. 很久没参加技术相关的大会了,不过 11/23 特意去参加了微信官方组织的开发者培训班,日常安排如下: 当然,其实去听培训偶就是为了下午要分享的 微信

发现小程序一个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

<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>

  起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开"体验.但是,2MB也限制了小程序功能的扩展,小程序业务的发展可能需要更大的体积.为了解决这个问题,微信推出了-分包加载. 小程序分包加载 对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作. 目录结构: ├── app.js ├── app.json ├── app.wxss

小程序开发大家都知道,对主包的大小进行了限制,从最初的1M变成了现再的2M,一般情况下是够用了:但是偶尔可能会出现超出2M的可能,我们可以对小程序进行分包加载. 1.小程序分包加载 a. 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. b. 构建小程序分包项项目时,分包类别: 主包:放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本 分包:根据开发者的配置进行划分. c. 对小程序进行分包,可以优化小程序首次启