微信小程序
微信小程序板块
LuckXinXin
加油
展开
-
小程序的mpvue
mpvueVue.js 小程序版, fork 自 vuejs/vue@2.4.1,保留了 vue runtime 能力,添加了小程序平台的支持。 mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验框架原理两个大方向通过mpvue提供 mp 的 runtime 适配小程序通过mpvue-loa原创 2020-08-22 11:12:49 · 244 阅读 · 0 评论 -
小程序的wepy vs mpvue
数据流管理相比传统的小程序框架,这个一直是我们作为资深开发者比较期望去解决的,在 Web 开发中,随着 Flux、Redux、Vuex 等多个数据流工具出现,我们也期望在业务复杂的小程序中使用WePY 默认支持 Redux,在脚手架生成项目的时候可以内置Mpvue 作为 Vue 的移植版本,当然支持 Vuex,同样在脚手架生成项目的时候可以内置组件化WePY 类似 Vue实现了单文件组件,最大的差别是文件后缀 .wpy,只是写法上会有差异export default class In原创 2020-08-22 11:12:25 · 254 阅读 · 0 评论 -
小程序的性能优化
我们知道view部分是运行在webview上的,所以前端领域的大多数优化方式都有用加载优化代码包的大小是最直接影响小程序加载启动速度的因素。代码包越大不仅下载速度时间长,业务代码注入时间也会变长。所以最好的优化方式就是减少代码包的大小小程序加载的三个阶段的表示优化方式代码压缩。及时清理无用代码和资源文件。减少代码包中的图片等资源文件的大小和数量分包加载。首屏加载的体验优化建议提前请求: 异步数据请求不需要等待页面渲染完成。利用缓存: 利用 storage API 对异.原创 2020-08-21 12:00:15 · 536 阅读 · 0 评论 -
授权获取用户信息流程
session_key 有有效期,有效期并没有被告知开发者,只知道用户越频繁使用小程序,session_key 有效期越长在调用 wx.login 时会直接更新 session_key,导致旧 session_key 失效小程序内先调用 wx.checkSession 检查登录态,并保证没有过期的 session_key 不会被更新,再调用 wx.login 获取 code。接着用户授权小程序获取用户信息,小程序拿到加密后的用户数据,把加密数据和 code 传给后端服务。后端通过 code 拿到 s..原创 2020-08-21 12:00:00 · 759 阅读 · 0 评论 -
小程序的问题
小程序仍然使用 WebView 渲染,并非原生渲染。(部分原生)服务端接口返回的头无法执行,比如:Set-Cookie。依赖浏览器环境的 JS库不能使用。不能使用 npm,但是可以自搭构建工具或者使用 mpvue。(未来官方有计划支持)不能使用 ES7,可以自己用babel+webpack自搭或者使用 mpvue。不支持使用自己的字体(未来官方计划支持)。可以用 base64 的方式来使用 iconfont。小程序不能发朋友圈(可以通过保存图片到本地,发图片到朋..原创 2020-08-21 11:59:46 · 166 阅读 · 0 评论 -
小程序的WXML && WXSS
WXML支持数据绑定支持逻辑算术、运算支持模板、引用支持添加事件(bindtap)Wxml编译器:Wcc 把 Wxml文件 转为 JS执行方式:Wcc index.wxml使用 Virtual DOM,进行局部更新WXSSwxss编译器:wcsc 把wxss文件转化为 js执行方式: wcsc index.wxss尺寸单位 rpxrpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。公式:const dsWidth = 7原创 2020-08-20 09:39:37 · 503 阅读 · 0 评论 -
小程序架构
微信小程序的框架包含两部分 View 视图层、App Service逻辑层。View 层用来渲染页面结构,AppService 层用来逻辑处理、数据请求、接口调用。它们在两个线程里运行。视图层和逻辑层通过系统层的 JSBridage 进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理视图层使用 WebView 渲染,iOS中使用自带 WKWebView,在 Android 使用腾讯的 x5内核(基于 Blink)运行。逻辑层使用在 i..原创 2020-08-20 09:39:21 · 386 阅读 · 0 评论 -
小程序的工程化
工程化做什么目前的前端开发过程,工程化是必不可少的一环,那小程序工程化都需要做些什么呢,先看下目前小程序开发当中存在哪些问题需要解决:不支持 css预编译器,作为一种主流的 css解决方案,不论是 less,sass,stylus 都可以提升css效率不支持引入npm包 (这一条,从微信公开课中听闻,微信准备支持)不支持ES7等后续的js特性,好用的async await等特性都无法使用不支持引入外部字体文件,只支持base64没有 eslint 等代码检查工具方案选型对于目前常用原创 2020-08-20 09:39:07 · 586 阅读 · 0 评论 -
小程序的数据统计
数据统计作为目前一种常用的分析用户行为的方式,小程序端也是必不可少的。小程序采取的曝光,点击数据埋点其实和h5原理是一样的。但是埋点作为一个和业务逻辑不相关的需求,我们如果在每一个点击事件,每一个生命周期加入各种埋点代码,则会干扰正常的业务逻辑,和使代码变的臃肿,笔者提供以下几种思路来解决数据埋点设计一个埋点sdk小程序的代码结构是,每一个 Page 中都有一个 Page 方法,接受一个包含生命周期函数,数据的 业务逻辑对象 包装这层数据,借助小程序的底层逻辑实现页面的业务逻辑。通过这个我们可以想.原创 2020-08-19 10:03:49 · 3477 阅读 · 0 评论 -
小程序的图片导出
这是一种常见的引流方式,一般同时会在图片中附加一个小程序二维码。基本原理借助 canvas 元素,将需要导出的样式首先在 canvas 画布上绘制出来 (api基本和h5保持一致,但有轻微差异,使用时注意即可借助微信提供的 canvasToTempFilePath 导出图片,最后再使用 saveImageToPhotosAlbum (需要授权)保存图片到本地如何优雅实现绘制出需要的样式这一步是省略不掉的。但是我们可以封装一个绘制库,包含常见图形的绘制,例如矩形,圆角矩形,圆, 扇形, 三.原创 2020-08-19 10:03:32 · 5257 阅读 · 0 评论 -
小程序登录
unionid和openid了解小程序登陆之前,我们写了解下小程序/公众号登录涉及到两个最关键的用户标识:OpenId 是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户。UnionId 是一个用户对于同主体微信小程序/公众号/APP的标识,开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId,实现多个小程序、公众号、甚至APP 之间的数据互通了。关键Apiwx.login 官方提供的登录能力wx.checkSession校验用户当前的sess原创 2020-08-19 10:03:17 · 437 阅读 · 0 评论 -
微信小程序与vue区别
生命周期不一样,微信小程序生命周期比较简单数据绑定也不同,微信小程序数据绑定需要使用{{}},vue 直接:就可以显示与隐藏元素,vue中,使用 v-if 和 v-show 控制元素的显示和隐藏,小程序中,使用wx-if 和hidden 控制元素的显示和隐藏事件处理不同,小程序中,全用 bindtap(bind+event),或者 catchtap(catch+event) 绑定事件,vue:使用 v-on:event 绑定事件,或者使用@event 绑定事件数据双向绑定也不也不一样在 vue中,.原创 2020-07-16 09:28:42 · 293 阅读 · 0 评论 -
小程序关联微信公众号如何确定用户的唯一性
使用 `wx.getUserInfo` 方法 `withCredentials` 为 `true` 时 可获取 `encryptedData`,里面有 `union_id`。后端需要进行对称解密原创 2020-07-15 09:31:15 · 1076 阅读 · 0 评论 -
小程序的 wxss 和 css 有哪些不一样的地方?
wxss的图片引入需使用外链地址没有 Body;样式可直接使用 import 导入原创 2020-07-15 09:29:49 · 870 阅读 · 0 评论 -
微信小程序怎样跟事件传值
给 HTML 元素添加 data-*属性来传递我们需要的值,然后通过 e.currentTarget.dataset 或onload的param参数获取。但 data - 名称不能有大写字母和不可以存放对象原创 2020-07-15 09:28:42 · 605 阅读 · 0 评论 -
微信小程序有几个文件
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式, js 逻辑处理,网络请求json小程序设置,如页面注册,页面标题及 tabBar。app.json 必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window 背景色,配置导航条样式,配置默认标题。app.js 必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文.原创 2020-07-14 10:41:29 · 787 阅读 · 0 评论