微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮2.uni.login获取code3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口(1)若已注册则提示登录成功,并调用后台给的获取用户信息的接口,并把数据保存到vuex(2)若未注册则调用注册接口,注册成功之后调获取用户信息…
小程序分享二维码思路:a分享二维码给b,二维码上带有a的标识ppidb接收a的二维码打开页面,将接收到的ppid传递给后台,后台就可以知道b是通过a的二维码打开的页面 1.在后台设置识别二维码进入的页面,这里用index页面。2.在index页面是接收二维码里面的参数,解析并截取获取。二维码的参数格式:scene=ppid:12 export default { data() { return { ppid: "", } }, onLoad(option) { // 解析二维码里面的参数获得ppid this.…
前言 出于多端投放和开放生态的考虑,闲鱼开始接入整个阿里小程序体系。闲鱼在9月份迅速上线了第一个小程序鱼塘小程序,由于刚接触不熟悉小程序体系,整体性能上有比较大的优化空间,主要表现在以下问题: 小程序加载慢,低端 Android 机(Android vivo Y67)上首屏时间接近6s 滚动卡顿,在 iPhone 7P 上滚动帧率平均在 40fps 左右 滚动多屏数据之后 Tab 点击切换慢,在 iPhone 7P 上切换 Tab 等待时间 3-5 秒,瞬时帧率低于 30fps小程序由于其逻辑和渲染分离的架构特点,除传…
自从Alita发布以来,由于Alita和Taro一样都是React语法在小程序上的处理, 所以一直有很多人问我“已经有Taro了,为什么又造轮子呢??”,今天用这篇文章统一回答一下。 首先我们看下Taro,他是一套遵循 React 语法规范的 多端开发 解决方案。他遵循 React 语法规范,采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。 截止本文开始的时候,Taro在github上已…
需求描述: 1.正常播放音频2.可以滑动进度条3.可以切换上一条,下一条音频4.退出当前页或关闭小程序之后仍然可以正常播放5.试听功能进入该播放页不可以播放上一条,下一条6.退出该页面或小程序之后,再次回到该页面,播放条自动到当前播放进度 图二图三是关闭小程序之后微信页面的展示,可以通过悬浮关闭该音频。 参考文档[小程序官方文档--背景音频] ⚠️ 使用小程序 BackgroundAudioManager,需要在 app.json配置相关参数 "requiredBackgroundModes": [ "audio" ] 代码 …
微信小程序第一次拒绝地理位置授权,是不可以再次谈起授权弹框的,想要再次授权只能打开设置面板 uni.openSetting({ success(res) { console.log(res.authSetting) } }); getLocal() { uni.openSetting({ success: (res) => { if(res.authSetting) { var that = this uni.getLocation({ type: 'gcj0…
前言 之前写个一个版本的[多图下载],重构进行了代码升级让代码更加简介分为两步:第一获取保存到相册权限第二下载图片主要涉及两个文件,index.js 和download.js另外现在如果有图片下载失败也弹出下载完成后续需要优化 核心代码 /** * 获取相册权限 */ export function wxSaveAuth() { return new Promise((resolve, reject) => { wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { …
小程序原生开发有不少槽点: 原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发 微信定义的这套语法,wxml、wxs,以及wx:if等语法,私有化太强。不如正经学vue,学会了全端通用,而不是只为微信小程序 vue生态里有太多周边工具,可以提高开发效率,比如ide、校验器、三方库。。。而微信的开发者工具和专业编辑器相比实在不好用,个性化设置也非常少 作为前端工程师,除了微信小程序,还要开发web、其他小程序甚至App,…
直接上代码`function setOption(paramChart, title, chartType, xdata, ydata,yscale, dataFlag) { let intervalVal = 0 if (dataFlag == 'staffAct') { intervalVal = 'auto' } else { intervalVal = 0 } const option = { color: ['#fff'], title: { text: '', x: 'left', y: 'top', padding: 5, textStyle: { fontSize: 12, color: '#fff' }, }, grid: { left: '3%', …
基于Taro + Taro-ui + 微信云开发 初步实现了一个小程序 小程序码 开始 CLI 工具安装 首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli,或者直接使用npx: # 使用 npm 安装 CLI $ npm install -g @tarojs/cli # OR 使用 yarn 安装 CLI $ yarn global add @tarojs/cli # OR 安装了 cnpm,使用 cnpm 安装 CLI $ cnpm install -g @tarojs/cli 项目初始化 使用命令创建模板项目 taro init taro-timer 按提示进行相应的选择(微信云开发可直接选择wxc…
即使是战争,也要像西伯利亚风雪中挺拔的白桦,出落得亭亭玉立,楚楚动人。 相信只要开发过小程序,对wx.navigateBack 这个 api都不会陌生。在摩拜单车的小程序中,它也被改造的更方便满足复杂的业务需求,可谓之 增强型的 wx.navigateBack。 先来看看官方文档中的用法: wx.navigateBack({ delta: 2 }) delta 表示返回的层级数。通过具体的业务示例来说明我们如何改造它: 余额充值的例子 两个页面: A 页面展示用户余额,使用 H5 实现,通过 web-view 嵌套在小程…
人活着,总得要点英雄主义的,哪怕失败、死亡。 也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。 很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等: Page({ onLoad() { this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { // 业务代码 // ... } }) } // ... }) 久而久之,每个页面的 js 里都是如上的重复代码。如果…
当用户在小程序内发起对话,你是在后台抓紧安排人工回复吗? 由于等待回复时间过长,用户产生不满并弃用了你的小程序。 “秒回”是对话的基本要求,及时回复才能给到用户尊重和被重视感。然而,受人力成本的因素影响,专业客服往往需要1对N,在对话需求激增的情况下,回复并不高效。其实,用户发起对话,需求大概分为两种:服务和咨询。当用户只是要获取固定服务的渠道,可以通过AI机器人解答用户的问题。 然而目前的情况是,AI对话能力并不是每个小程序开发团队都能自行开发…
小程序生成图片分享朋友圈 小程序开发者都希望自己的小程序得以广泛传播,因为不少小程序都设计了很多转发激励行为,但分享小程序到朋友圈(或其他外部平台)一直是一个难题。一个常见但方案就是生成分享海报、分享图片。但生成分享图片在技术上却也是一个难题。 技术选型 目前常用技术方案基本分为三种: 使用 canvas 绘图并生成 使用后端绘图库进行绘制,返回给小程序端 使用服务端开一个浏览器进行 HTML 渲染,并截图返回给小程序端 第一种方案:要求较高,canvas 和…
我在严冬下掘起结冰的泥土,我在黑暗的战壕里跃动,我用生命守护房屋的石板,我在散发着焦土味的废墟下长眠。 小程序中,除了每个页面有自己的 data,还有个全局数据存储地方:globalData,获取方式如下: let globalData = getApp().globalData 实际业务代码中总会遇到这种情况:写着写着发现需要用全局数据,但是不能直接就在当前函数里直接写上面的一段代码,因为要和别的函数共用,所以返回 js 文件顶部添加一段代码,再返回刚刚断掉的地方继续写,类似这样: // 省略1…
在公司小程序也开发了一段时间了,中间遇到过很多问题,特此记录几个比较典型的问题和解决方案。 一、textarea 的高层级问题 此问题提供源码demo,可导入微信开发者工具查看。 症状(表现) textarea 是小程序的原生组件,它的一个表现就是优先级很高,这导致了一些困扰,比如我们有一个表单页面,最下面就是一个textarea和一个保存按钮,这会导致textarea的文字会浮现在按钮上。如下图: 它最大的问题时会导致保存按钮可能点击无效或者会弹出键盘,并且开发者工具模拟器和真机…
小程序webview的限制 相信开发小程序的同学萌都知道,小程序的发布需要审核,这相对于web前端来说灵活性差了不少。加上项目代码体积的限制,我们有时候会在小程序里内嵌webview,这样就解决了上面讲的两个问题。但是,由于小程序设定了存在webview的页面,webview组件层级一定是最顶层的,也就是无法使用原生小程序提供的其他组件。例如Button。Button是具有多种open-type的,有时候我们需要做一些分享,那么内嵌webview的页面该怎么做呢? 利用小程序内嵌webview暴露的wx.miniProgr…
窗外,是5月明媚的阳光,澄澈蔚蓝的天空,有炮弹欢快地叫着飞过。50多年过去了,我依然如此清晰地记得。 在一些框架中发现会提供一个很实用的功能:拦截器(interceptor)。例如要实现这个需求:小程序每次获取到定位后都存到 globalData 里: wx.getLocation({ // .. success(res) { getApp().globalData.location = res // ... } }) 如果每一处使用 wx.getLocation 的地方都这么写也没啥大问题,但总显得不够“智能”,一方面是多了重复代码,另一方面如果需…
告诉元首我已尽力,告诉父亲我仍然爱他! 熟悉 Vue 的同学对 computed 和 watch 一定很熟悉,这些特性大大方便了我们对代码中的数据进行处理: var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) var vm = new Vue({ el: '#demo', data: { firstName: 'Fo…
战争,信念,意志和情感,这些散发着光芒和硝烟的词汇,象一枚枚炮弹轰入我们现在的生活。历史的记忆不会被抹灭。 当我们在各自项目里幸福的拷贝着官方代码 demo,在 componnets 文件夹里使用 Component 方法书写一个个组件时,不要忘记,在 2018 年上半年以前,小程序是没有提供组件化方案的。 当时,主要有两种解决方法,一种是 WePY 拷贝法,另一种则是摩拜 template 法。 WePY 拷贝法 比如有个最简单的按钮组件: <!-- components/button.wpy --> <template&…
第一次在公司里负责做小程序,因为第一次做怕遇到大坑,所以用的原生开发。页面数据共享比较常用,所以来研究研究。 A页面直接url传参 B页面onload里接收。这种简单粗暴但B如果还想给A传参感觉不太方便。而且传一个很大的对象过去,必须要stringfy。但是地址长度有限所以会有bug 直接wx.setStorage 简单粗暴,直接存微信本地。有时候我并不想存太久,只是临时的数据也给我存本地了感觉怪怪的。 getCurrentPages() 这个可以拿当前的页面栈,通过他来那上一个页面,上上个页面的…
学完 DeepLearning 系列课程后就想做一个小应用试试。一开始基于 RNN 训练了个古诗机器人,这个做的人很多,于是换了宋词。宋词是基于词牌生成,相对数据量比较少,基于 RNN 训练效果很一般。后来了解到了 Transformer 算法感觉发现了生机,训练了一下感觉效果真是不错。 使用效果测试的话可以直接扫码访问这个小程序玩玩, 或者小程序搜索 【小诗一首】: 这是生成的例子: Transformer (Attention Is All You Need) 介绍 Transformer 是 Google 于 2017 年在 Attention Is All …
登录和获取用户信息是小程序中最基本的两步操作,但是由于之前小程序官方开始时的设计缺陷,导致很多开发者将登录和获取用户信息绑定使用,尽管后来小程序wx.getUserInfo接口调整为:在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail回调,但是改了之后,依旧有不少开发者对这两步的概念混淆不清,接下来这篇文章将会详细介绍小程序这两步操作 登录 wx.login()用来做登录的方法,调用接口获取登录凭证,code发送给后端用于置换session_key和openid等数据,接…
微信小程序中嵌入html使用如下标签<rich-text nodes="{{--}}"></rich-text>之前一个需求开发当中,需要在小程序中套入页面,小程序官方方法如上,但是又很多问题,比如样式问题没办法修改,经搜索的替换标签方法未生效,因为是后台返回,后端人员并不想他们处理两次标签,只想和h5,pc公用一套 经多方实验沟通采用了如下方法,后端去掉html body等头部,保留信息片段,前端创建专门的展示页面,如:`<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l…
不支持 svg 标签 web 可以,但是小程序不可以,只能使用 image 标签引用 svg 文件。 解决办法 有第三方插件可以提供变相支持:https://github.com/Tencent/omi/tree/master/packages/cax 但有实际使用存在偏差,不建议使用。 浏览器效果: 小程序效果: 不支持内嵌图片的 svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image xlink:href="https://mdn.mozillademos.org/files…
你也许并不需要小程序框架。 市面上不停的会有大的公司推出自己的小程序的研发库 / 框架,功能十分强大,也为小程序的开发带来了便利。但在一些积极的反馈中,我们也看到不一样的声音: @白小虫:又一个轮子。。 @jsweber:小程序不用任何框架,开发体验也不错啊,本身就借鉴了 vue 和 react 的思想。 @月月木子:现在中上流公司的前端都很热衷于造自己的轮子或者给别人的轮子换皮然后说是自己的轮子,疯狂垒高自身的技术壁垒,即有了给领导吹牛的资本,让新来的人肯定属于…
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进行授权,然后新的页面授权成功,立马跳回首页,显示用户信息。 话不多说,直接上代码 代码结构: index是首页login是授权页 首页代码 index.wxml <!-- 未授权,只显示一个授权按钮 --> <view wx:if="{{result==false}}"> <button bindtap="getinfo…
小程序 input 数据双向绑定,实现方法之一 我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。 小程序好像没有提供相应的方法支持,就需要我们自己写了。 原理 很简单,在 input 上先绑定需要取值的变量,如这个变量名是 name,然后再定义一个用于指向变量名的属性 data-modal 这个属性值设置为 name,在 input 的绑定方法中将这个属性值取出,就会知道这个 input 绑定了哪个变量,然后再将 input 的当前值赋给这个变量即可。 实现 wxml <input id='name' …
微信宣布小程序将可以在PC端微信打开后,智库君就接到要求,需要兼容PC端小程序,一开始以为官方已经做了完美适配,不需要改什么,但当本人下载内测版开始测试的时候,才发现或许坑还挺多的~~~ 下面分享下本人“搬砖填坑”的全过程:(以下都是PC端小程序特有的问题,手机端正常) 先说下使用流程 微信开发者工具菜单栏点击 设置->通用设置,在自动预览部分勾选“启动 PC 端自动预览”。 使用自动预览功能,点击 预览->自动预览->编译并预览,成功的话将在微信 P…
小程序重构,采用 uniapp 框架。记录一下踩过的坑。关于用户拒绝再次调起授权,及如何识别语音识别、微信地址、附近地址的处理。 语音识别 组件 语音识别,小程序只有录音功能,若要识别录音文件,常规做法是把录音文件传递给后端,然后由后端调用百度或讯飞语音识别接口,然后返回结果。 但是微信小程序官方提供了“同声传译”插件,支持前端直接识别。可参考:插件介绍、插件使用文档 uniapp 插件配置,在 manifest.json 文件中,源码模式,加入: ... "mp-weixin…
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.