首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【小程序探索】:深入理解小程序中的数据

    UI 小程序作为MVVM框架中的一员,数据驱动是核心,得数据者得天下 要理解数据通信,和生命周期、运行机制密不可分,像双线程通信模型、数据驱动、底层框架、界面渲染机制等等,本文不会展开叙述,也不可能讲的比官方文档更好...、更实时 本文主要理解以下几点:(想了半天,才概括如下) 1、小程序中数据的作用域 2、合理操作数据,提升性能 3、组件间的数据通信 4、缓存数据 5、扩展-状态管理westore 在这之前,还是上几张官方的图...明确几点概念 渲染层和数据相关 逻辑层负责产生、处理数据,小程序的JS脚本运行在同一个JsCore线程里 逻辑层和渲染层是一对多的关系,但页面对象(page)和页面层级(webview)一一对应 一、小程序中数据的作用域...,和VUE一样,不过VUE中只要写this.text,而小程序中要写this.data.text,每次写到这个就郁闷,其实与界面渲染无关的数据最好不要设置在data中,对性能也是大有好处 4、自定义组件中的数据...而且据统计,开发小程序使用最多的技术栈是使用小程序本身的开发工具和语法,所以最大的痛点只剩下状态管理和跨页通讯 现在主流的MVVM框架如vue/react/angluar都有状态管理,小程序也可以有,由于小程序的即时特性

    1.3K30

    微信小程序从零开始开发步骤(一)搭建开发环境小程序初始化目录介绍:

    小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。有了小程序帐号之后,我们需要一个工具来开发小程序。...image 4:安装完成之后 你的第一个小程序开启:新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart...OK,你已经成功创建了你的第一个小程序,并且在微信客户端上体验到它流畅的表现。 ? image 小程序初始化目录介绍: 1:page 页面文件夹 存放项目页面渲染相关文件 ?...坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。...阅读链接: 微信小程序从零开始开发步骤(一)搭建开发环境https://www.jianshu.com/p/0ff8c3b2f59f 微信小程序从零开始开发步骤(二)创建小程序页面https://www.jianshu.com

    2.2K40

    小程序中为每篇文章生成小程序码

    需求 为博客的每一篇文章生成分享海报,每张海报上需要一个带文章id的小程序码,微信官方提供三种方式生成小程序码。...api api名区别wxacode.createQRCode获取小程序二维码,适用于需要的码数量较少的业务场景。...通过该接口生成的小程序码,永久有效,有数量限制wxacode.get获取小程序码,适用于需要的码数量较少的业务场景。...通过该接口生成的小程序码,永久有效,有数量限制wxacode.getUnlimited获取小程序码,适用于需要的码数量极多的业务场景。通过该接口生成的小程序码,永久有效,数量暂无限制。...: event.page, // 页面路径 width: 430, // 生成二维码的宽度 scene: event.scene, // page后面跟的参数写在scene中

    1.4K20

    微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗...iPhone 设备,重按时会触发 有两个注意点: Touchcancle: 在某些特定场景下才会触发(比如来电打断等) ​ tap事件和longpress事件通常只会触发其中一个 二.书写方式 页面中...-- 点击传变量data-传过去的key='{{变量名}}' --> {{a}} js文件中...}, fuck_2: function (e) { console.log(e) }, 三.有传参的事件取值 事件传递参数 当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中,...的区别 这个区别普通的标签看不出来,但是一旦有标签的父标签页有一个事件时候,这时候就有区别,currentTarget指向的是本身的函数调用传的参数,而target不是 四.传参和定义变量之间的操作 页面中js

    1.5K10

    微信小程序开发如何初始化远程仓库并 PUSH

    你需要先初始化远程仓库,一般来说你可以直接用微信的 Git,你也可以用其他的 Git。 假设我们这里使用微信自带的 Git。...你的微信小程序项目,必须要属于一个项目组。 选择你希望进入的项目组。 创建项目 在首页中,你可用选择创建项目。 在后续的页面中,输入你希望创建的项目组名称和你的项目名称,然后单击创建后继续。...在开发环境中设置远程地址 当你已经有项目的远程地址后,你可以在你的本地项目中设置你远程仓库地址。 右键后选择添加 输入名字和地址后保存。...Push 提示授权失败 如果你提示授权失败,你需要进入微信的 Git 网站中,设置一个密码。 你也可以在账户设置的路径下设置密码。...如何还是提交失败的话,你可以在你本地仓库中的授权设置中设置用户名和密码。

    1.3K00

    小程序中实现视图懒加载

    前言 在写小程序时,有个页面由于要展示很多内容,光弹窗都6个,还有大量的列表,所以wxml节点数很多,超过了小程序建议的1000个节点以下。...之后,又将手机的性能监听面板打开,发现再次渲染耗时那数值一直在闪动,但始终停留在0ms,就肯定的是小程序渲染出问题了。又怀疑只要是分包页面都有问题,就发现其他分包页面,并没有问题。...下面是两张对比图: 没有使用懒加载 image.png 使用了懒加载 image.png 项目地址: github地址 码云地址 懒加载原理 小程序通过setData后的数据,再放入wxml上就会被渲染...此例子中与只有触底后渲染下面的视图,再加了点击左边的分类时,也做做渲染。 比如:初始时只渲染了第一组数据,当时我点击了第四个分类时,要将第二个,第三个,第四个的数据都显示出来。

    83720

    微信小程序中获知用户运行小程序的场景

    最近,微信小程序团队像打了鸡血似的,不断推出一系列新的小程序功能,以及拓展了不少小程序的入口,使得小程序的运行场景变得越来越丰富。...我们可以在小程序的App入口代码中获取该场景值: //在小程序的onLaunch和onShow方法参数中可获取场景值 App({ onLaunch: function (options) {...1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜索结果页 1007 单人聊天会话中的小程序消息卡片 1008 群聊会话中的小程序消息卡片 1011...1034 微信支付完成页 1035 公众号自定义菜单 1036 App 分享消息卡片 1042 添加好友搜索框的搜索结果页 1043 公众号模板消息 1044 群聊会话中的小程序消息卡片...“发现”页面中的小程序入口运行你的小程序的: ?

    86840

    微信小程序mpvue+Vant Weapp初始化

    第二步、进入项目->安装依赖->启动项目 $ cd my-project $ npm install $ npm run dev 运行成功之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码...Vue开发环境已经搭建好,接下来打开微信开发者工具,打开我们的项目my-project 第三步、引入Vant Weapp小程序 UI 组件库 可参考Vant Weapp官网 # 通过 npm 安装 npm...主要是为了mpvue在编译成微信小程序开发语言的时候,也顺带把vant组件复制到目录里,这样的话才能被项目找到。...button/index" } 页面中直接引用组件就好了 默认按钮主要按钮信息按钮警告按钮危险按钮 注意:在微信开发者工具中选择ES6 转 ES5,否则要报错 第五步、重启项目,就可以在微信开发者工具中查看效果了

    31130

    在小程序中调用API在小程序中自定义弹窗组件

    因为业务需要在小程序里加上很多的弹窗,就想写一个组件来实现; #创建组件 新建文件夹component专门放组件, 新建popup页面,在popup.json中设置: { "component"...在子组件中自定义值是以小驼峰的形式书写的,但是在父组件传的时候要以“-”连接。...bindtap = 'onTap' 然后通过在method中设置onTap函数 在onTap中的triggerEvent中设置要触发父组件事件的函数名称 父组件接收到字组件的消息,然后触发事件 具体参考...:小程序-组件通信 子组件: wxml × js methods: { //放自定义的方法 onTap...; this.setData({ isShowPopup: true }) } 参考 小程序-自定义组件 代码地址:https://github.com/AnsonZnl

    3K20
    领券