Dreawer微信小程序联盟

一、生命周期先贴两张图：vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad: 页面加载 一个页面只会调用一次，可以在onLoad中获取打开当前页面所调用的query参数。 onShow: 页面显示 每次打开页面都会调用一次。 onReady: 页面初次渲染完成 一个页面只会调用一次，代表页面已经准备妥当，可...

今天跟大家分享一下哈啰出行支付宝小程序的架构演进之路。内容主要分四个部分。一是对支付宝小程序的简单介绍和我们的项目背景，二是我们遇到的问题和解决问题的思考，三是我们为了解决这些问题引出的哈啰小程序新架构，四是对未来的展望。一、小程序介绍及背景接触过支付宝小程序的同学可能不是太多，不过不要慌，你完全可以把支付宝小程序当成微信小程序，它们有非常相似的架构。都有一个大而全的IDE，如图，左中侧是一个类似 VS Code 的编辑器，右侧是小程序模拟器，顶部是配置和操作区域。通过这个IDE，开发者可以

因为最近想实践一下小程序的云开发能力，于是设计开发了一个简单的投票应用，欢迎感兴趣的一起学习交流。代码仓库https://github.com/luosijie/m...由于小程序【个人开发者】不开放【投票】类目，所以就不能在线预览了，我放几张应用的截图数据库设计总共用到了3个集合1. users (用户集合)基本上直接保存用用户的userInfo数据{ "_id":"023ce9555ff068de0314b5521c313ee6", "OPENID":.

前言一提小程序与动画，首先想到的是什么？嗯，微信小程序独创了一套动画玩法，官方支持3种动画方案，分别是createAnimation、this.animate和CSS3动画。1.createAnimation与Animation创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。var animation = wx.createAnimation({ transformOrig...

前段时间在下开发了个微信小程序，开发过程中总结了一些我觉得对我有用的小技巧，提炼出来，相当于一个总结复盘，也希望可以帮助到大家。如果对大家确实有帮助，别忘了点赞哦 ～微信开发者工具版本：1.03.2006090（2020-06-19）基础库版本：v2.12.1(2020-08-04)1. 开发中可能遇到的坑以及 Tips本来想写个小技巧的，结果我总结了一堆坑，没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂，从微信开发者工具到所谓的「全新语言」，都有一种浓浓的半成品的 f..

某天闲着无聊想练一下手速，去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后，是列表居然出现了白屏。看了一下控制台：‘Dom limit exceeded’，dom数超出了限制， 不知道微信是出于什么考虑，要限制页面的dom数量。一.小程序页面限制多少个wxml节点？写了个小dome做了个测试。 listData的数据结构为：listData:[ { isDisplay:true, itemList:[{ ..

双击快捷方式，使用微信扫码登录（如：下图）。 登录成功后，我们将进入小程序开发工具的“创建项目”界面（如：下图）。 点击添加按钮，打开“创建小程序”对话窗口，默认项目名为：miniprogram-1（如：下图）。 这里有一个需要注意的地方：只有选中“不使用云服务”才能够选择开发语言，否则没有语言选项（如：下图）。 同时需要注意的是：小程序开发者的测试账号不能创建云开发项目，所以需要进行云开发的开发者，还是要注册一个正式账号。...

该文适合还没有微信小程序开发者账号，以及有了开发者账号同时还想注册一个测试账号的读者。开发者测试账号推出的用意，主要是：方便我们在决定正式注册小程序账号之前，或者仅仅只是想体验一下小程序（或小游戏）的各种开发能力时，我们可以先申请一个小程序的测试账号进行体验；我们可以使用该帐号可以登录微信官方推出的《小程序开发者工具》，并创建和体验开发小程序项目。如果你想体验整个注册流程，请点击这里进行注册；这里出于简单起见，我们可以点击这里直接注册小程序开发者测试账号。如果你已经有...

新注册的小程序，第二天登录，怎么也登录不进去后台！？？？怎么办，原因很简单，是你自己搞错了登录账号！！！小程序登录完整流程第一步，登录微信公众平台地址，注意小程序登录地址同公众号登录是一个地址，地址为：https://mp.weixin.qq.com/第二步，最保险的方法是选择扫码登录，用小程序管理员的微信扫描二维码，扫码后选择对应的小程序登录，就可以进入小程序后台了。你还可以选择输入小程序账号密码登录，验证密码正确后，进入管理员确认，如图，注意：小程序的账号和密码和你的公众号账号和

2021春节期间，微信陆续发了红包封面，大家可以在微信搜一搜搜索相关的品牌的名字就能免费领取其红包封面。小编为你整理了领取春节微信红包封面序列号大全，请收好！2021微信红包封面免费领取最新领取时间：2月5日-2月14日，但各品牌领取时间不一领取方式：方式一：打开微信发现搜一搜，搜索公众号名字，即可进入官方区免费领取红包封面。比如，搜索“极乐技术社区”，就能免费领取了红包封面了2021春节微信红包封面免费领取序列号大全注意：各个品牌的红包封面虽然都是免费领取，但是数量有限哦，大家

背景之前的工时系统是原生的小程序实现，由于产品逻辑需要优化，代码混乱又仅限微信平台使用，公司致力于想给工时系统重构后支持多平台，并对外开放使用，使之成为一款真正的商业产品。经过前期调研后，uni-app对于多平台的支持最好，且易于上手，于是采用该框架对工时系统进行改造。uni-app介绍uni，读 you ni，是统一的意思。很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTM

框架简介 Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架，通过 Mpx ，我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序，Mpx 具有以下一些优秀特性：数据响应特性 (watch/computed) 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等) 深度性能优化(原生自定义组件/基于依赖收集和数据变化的 setData) Webpack 编译 ( npm/循环依赖/Babel/ESLint/css

只需要一个简单的云函数，就可以轻松的实现微信小程序支付功能1 先上效果图快速实现支付功能，有多快？有五连鞭这么快，不用搭建自己的服务器，不用买域名，不用备案域名，不用支持https。只需要一个简单的云函数，就可以轻松的实现微信小程序支付功能2 准备工作1，非个人小程序，个人小程序用不了支付（小程序appid）2，已经申请微信支付的商户号（商户id，商户秘钥）。3，小程序里关联你的商户号（小程序和商户号绑定）4，微信小程序开通云开发3 开干（1）初始化云开发环境.

因为之前一直做的是pc端的开发，而且大部分是用的vue或者react技术栈。并且所做的web网页基本也都不需要兼容低版本浏览器，所以在开发过程中对于兼容的处理其实比较少的。然而当开始接触微信小程序原生开发之后，也开始遇到并解决了一些坑，有些是兼容性导致的，这里就简单记录下自己遇到并解决的坑，希望对你也有所帮助，不用在此浪费时间！text标签不要换行，view中如果也只有文本也不要换行这个问题真的是写div写的习惯了，特别喜欢把标签换行就像这样：<div> 中国<div>复

前言转眼间已经参与过我厂好几个小程序的开发了，下面本妹子将开发中的那些注意点和各位小伙伴们分享下，妥妥的干货一枚。一、WXML不要换行写，有空格不行微信开发者工具不会对代码进行trim操作，如果代码中换行，页面也直接换行。wx:if vs hidden一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。图片处理1.大图片也会造成页面切换的卡顿 有一部分小程序会在

写在前面最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成，里面有一些常用的特效，总结一下，希望对大家和我都能有所帮助实例1：滚动tab选项卡先看一下效果图吧，能够点击菜单或滑动页面切换，tab菜单部分可以实现左右滚动好了，看一下我的源码吧！<喜欢的话拿走不谢哟>1、wxml <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">

什么是小程序小程序是一种新的移动应用程序格式，是一种依赖Web技术，但也集成了原生应用程序功能的混合解决方案。目前市面上小程序平台微信、支付宝、百度、头条、京东、FinClip等；小程序一些特性有助于填补Web和原生平台之间的鸿沟，因此小程序受到了一些超级应用程序的欢迎。它不需要安装，支持热更新。具备多个Web视图以提高性能。它提供了一些通过原生路径访问操作系统功能(原生接口)或数据的机制。它的内容通常更值得信赖，因为应用程序需要由平台验证。小程序可以分发到多个小程序平台（Web、原生应用，甚至是O

最近写了一个微信小程序的后端，微信支付（Java版）。在这里分享一下开发过程吧。首先我们要先去了解微信小程序支付开发的过程。这里说一下流程。微信小程序端获取到code，由微信小程序前端传code到后端，后端接收到code去调用微信官方接口换取openid。生成商户订单，即通过xml格式包含文档中必填的参数去调用统一下单接口(附下图)，返回prepay_id.当然微信小程序需要二次签名，同样通过必填参数封装，返回给微信小程序端。（其中有很多坑，下文慢慢讲解）正文开始1、微信小程序前端获取

随着小程序越来越被广泛使用，我们前端的开发工作也从单纯的web开发，扩大到web+小程序的跨端开发。为了提高研发效率，越来越多的web模块需要迁移、更新，兼容小程序以实现跨端复用。而这些模块也会跟随业务进行迭代和版本更新，这时候，我们就需要有良好的测试来保障各端模块的可靠性。由于我们将许多已有的web模块迁移到小程序，web端的测试相对已经比较完备了。因此我们需要考虑的是：如何快速的将已有的web用例迁移到小程序针对新模块，如何快速编写两端用例。（我们在web端使用的主要是Puppeteer和J

近年来随着互联网的发展，小程序、APP、H5……互联网载体形式越来越多，对于 APP、小程序、H5等应用的特点，很多人恐怕也比较迷惑，本文将整体概述APP、小程序、H5的含义，再从可用性、优缺点、用户体验、成本等方面来全方位讲解如何选择开发载体，今后选择将不再迷惑。同时，场景的不同决定着开发载体的不同，理性对待，理性选择。一、APP、小程序、H5是什么一句话概括了APP、小程序、H5三者的特点，相信朋友们也印象深刻，那么以概念的形式来说说，APP、小程序、H5究竟是什么？1. 小程序是.

一年一度的双十一历来都是各大电商商家冲击销量的关键节点，众多知名品牌在大促里斩获佳绩，单日30 万订单、业绩超过千万…有钱有名的商家能够获得好资源，报活动，进会场，投广告，可对于80%的中小卖家，只能望洋兴叹，资金有限，平台资源抢不到，那么对于中小商家来说，应该如何迎战双十一引爆销量？双十一大促众所周知在双十一大促中，20%的店铺完成80%的销售额，大型活动资源独享，80%的店铺在生存线上拼搏，大型活动基本没有参加过，对于80%中小商家而言，平台资源门槛高，或许依靠微信小程序获取流量将是更好的营

前言对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的页面的显示view层与逻辑层是通过data进行绑定关联,若需要更改页面中的数据,则通过setData的方式进行修改那么在小程序中如何自定义组件,以及自定义组件之间是如何进行通信呢实例效果通过上面一个简单的数字加减输入框组件,阅读完本文后,您将收获到在小程序中如何自定义组件在小程序页面中如何使用自定义组件父(外部)组件如何向子组件传值子组件如何接受父组件传递过来的值,同时渲染组件子组件内如

电商即将迎来每年最大的狂欢——11.11，早在去年，众多知名品牌在大促里纷纷斩获佳绩，甚至 1 天拿下 30 万订单、业绩超过千万。特意整理 11.11 玩法全套攻略，当是学习借鉴也好，查漏补缺也罢，大家尽可看看。双十一促销了解了这些，说不定你就能来一个飞速超车，成为同行里的销量黑马！预热：厚积方能薄发在等待 11.11 的日子里，铺天盖地全是各大品牌商发布的促销信息，如何才能把目标客群收拢到自家店铺？这时候，预热就显得尤为重要。在「大促冲刺」的前置环节，越多客户做...

在小程序中实现tab选项切换是一个非常常见的效果,对于固定几个tab切换或许轻而易举,但若出现多个,对于有些新手,却不知道怎么控制您将阅读完本文后,将获取到两种方式实现tab切换效果,但凡以后遇到类似的需求,都可以实现(本文重点)实例效果具体实现代码微信 wxml 代码<view> <view class="tab-container"> <view class="default {{type=='expend'? 'expend-activ

在开发小程序的时候，小程序密钥是必须的，今天一起来了解小程序密钥在哪里获取：方法/步骤 首先我们用小程序的账号登录微信公众平台 点击开发 点击开发设置 然后就可以看到密钥 点击重置即可获得 密钥投入使用就不要重置了，会影响上线的项目 ...

这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包含了UI层的功能，还提供了API能力、服务端的能力，所以说小程序框架本身是一个比常规的前端框架更完善的东西，或者说是一个完善的构建应用系统。本文中所说的原生小程序与小程序框架的对比，均指与第三方小程序框架的对比。在小程序的世界里，原生小程序框架已经足够好，它就是那把给你雕刻小而美应用的雕刻刀，而不必要去寻找

目前，微信小程序的入口有很多，用户在APPx应用魔方管理后台，配置小程序基本信息提交审核，审核通过后就可以在微信中搜索到自己的小程序，通过扫码、搜一搜、附近小程序等入口都可以找到小程序。一、主界面、发现栏(4个)微信聊天主界面下拉、发现——小程序——附近的小程序、发现——小程序——我的小程序、发现——小程序——最近使用的小程序二、搜索栏(5个)顶部搜索框的搜索结果页、顶部搜索框搜索结果页“使用过的小程序”列表、发现——小程序主入口搜索框的搜索结果页、添加好友搜索框的搜索结果页三

当前国内小程序平台众多，微信小程序、支付宝小程序、头条小程序、以及未来还会出现的新小程序平台，所以为了解决一套代码可以在多个小程序平台上运行，出现了多种方案来解决，京东的 Taro、蚂蚁的 Remax、微信的 Kbone，各有特点，主要归为两种类型，编译时与运行时适配两种。此文介绍国内主流小程序的架构，以及通过运行时适配可达到一套小程序代码运行在多个小程序平台上的方案，主要介绍 kbone 与...

小程序setData 修改 data 中数组内不定对象的数据普通变量的 setData()在某些时候，我们的小程序中存在的不只是像下面这样的简单的变量:变量值这种形式data: { name: 'Kyle', age: 28, mail: 'kylebing@163.com'}这种形式的数据，在需要修改的时候，只需要如下形式修改就可以了...

官方文档给出的双线程模型:小程序的宿主环境微信客户端提供双线程去执行wxml,wxss，js文件。双线程模型1.上述的渲染层上面运行着wxml文件，渲染层使用是的webview线程进行渲染（一个程序会有多个页面，也就会有多个view线程进行运作）2.js文件是运行在逻辑层，逻辑层的js是通过jscore进行运行的。通过双线程界面的渲染过程是怎样的？wxml与D...

最近老是有同学问我小程序ocr识别的问题，就趁机研究了下，实现了小程序识别身份证，银行卡，驾照，营业执照，图片文字的功能。今天来给大家讲讲详细的实现流程。先画一张流程图出来第一次看到这个流程图，可能有点萌，什么云开发，云函数。。。。不要着急，我们接下来会一步步带大家实现。先看下我们的页面和效果图。功能其实很简单，就是我们点对应的按钮后，去拍照或者去相册选择对应的图片。然...

作者：w_西城我们在处理模块曝光埋点时，需要根据页面滚动的位置判断模块是否可见（被曝光）。Web 上传统方法是增加页面 scroll 监听事件，根据滚动位置与模块位置进行对比判断，小程序上也可以使用这种方法，但现在有更便捷优雅的替代方案 —— IntersectionObserver 对象。IntersectionObserver 对象IntersectionObserver...

在一些框架中发现会提供一个很实用的功能：拦截器（interceptor）。例如要实现这个需求：小程序每次获取到定位后都存到 globalData 里：wx.getLocation({ // .. success(res) { getApp().globalData.location = res // ... }})如果每一处使用 wx.getLocatio...

我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。小程序好像没有提供相应的方法支持，就需要我们自己写了。原理很简单，在input上先绑定需要取值的变量，如这个变量名是name，然后再定义一个用于指向变量名的属性data-modal这个属性值设置为name，在input的绑定方法中将这个属性值取出，就会知道这个input绑定了哪个变量...

本文档 当中所用到的: const $request = this.request const post = $request.call('passport/wxLogin',data) post.then(res=>{}).catch() 是自己封装的请求方法，如axios，参考时可自行更改复制代码1、js生成接口请求参数签名加密定义规则：对所有发起请求的参...

大家好，我是skinner，这是我的第7篇分享序本文论述的是子或孙向父传递数据的情况，自下而上相信大家平时在小程序开发中肯定遇到过页面或者组件之间的数据通信问题，那小程序数据通信都有哪些方式呢？如何选择合适的通信方式呢？这就是本文要讨论的重点。关系划分在讨论都有哪些数据通信方式之前，我们先来定义一下，小程序页面、组件之间都有哪些关系。我总结了一下，大概分为以下3类：...

背景最近在开发小程序时遇到个需求，就是在小程序页面中嵌入一个广告视频，客户给的视频时横屏播放的，但是ui显示却要求是竖屏播放，在这里记录一下实现这个效果的踩坑全过程css transform旋转video组件最初没有想很多，直接使用transform: rotate(90deg); transform-origin: 0 100%;将视频直接旋转了90°，在安卓机上测试是也确实是旋转了...

有段时间比较闲就尝试着做了一个微信小程序，一是为了锻炼自己独立部署一个前后端全链路系统的能力，二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐，那什么是优质的信息呢？我这里假设的是排行榜里越靠前的信息就越是优质的信息，于是就做了一个这几类信息的排行榜小程序，当然排行的信息不是我随便瞎编的，数据来源主要是豆瓣以及其他一些排行网站，希望排行数据是权威...

导语：在小程序项目开发中，分享能力几乎是每个项目必备的要求，但原生的分享能力比较有限，不够灵活，今天就我们就一起来研究下，如何在现有基础上，增强小程序分享的能力，使信息传递更加直观、灵活。示例项目地址:github.com/ycvcb123/sh…本文目录:小程序分享基础 API 介绍 基于 canvas 动态绘制分享图片 canvas 对不同来源图片的处理（本地图片， 网络图片...

今天，小编将手把手教大家如何注册一个小程序。小程序目前的开放注册范围个人、企业、政府、媒体、其他组织均可成为小程序的注册主体。申请注册小程序共有两种方式：方式一步骤一：登录微信公众平台(http://mp.weixin.qq.com/)，单击右上角的“立即注册”。步骤二：点击“立即注册”之后，进入如下页面，选择“小程序”模块。...

1、小程序的定义小程序是一种不需要下载即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可打开应用，也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题，应用无处不在，随时可用，但又无需安装2、小程序的特性触手可及：不需下载安装即可使用无处不在：线上线下多场景用完即走：走了还会回来3、小程序的功能有哪些？a．提供小程序页概念：支持分享当前信息，例如分享某股票...

事先准备工作1.申请一个小程序，申请地址：传送门2.仔细阅读小程序的用户授权登陆官方文档：《用户授权登陆的流程》3.仔细阅读微信用户数据解密的相关文档：《用户数据解密说明文档》4.在小程序后台配置好相应的后端请求地址，路径是：开发----&gt;开发设置，如图5.小程序如果需要做多个小程序的打通，还需要在微信开放平台绑定到开发者账号下面， 如果不需要union_i...

出现场景：在做一个小球跟随手指移动的效果时候，由于在touchmove事件中频繁调用setData改变小球的位移实现，在开发工具和IOS平台还算流畅，但在安卓机下手机预览出现极其卡顿的交互，简直是不堪入目。可微信web开发者工具打开 片段代码https://developers.weixin.qq.com/s/B9UHyvmo7t6t问题根源：setData每秒调用高达50左右...

当我们谈业务稳定性的时候，通常是指后端工程师从架构的角度来看的，例如限流和降级、流量调度、业务开关、容量压测等，但监控也是整个业务稳定性建设中不可或缺的一环，例如对业务和前端的监控，以保证出现问题的时候，可以第一时间找到根因所在。今天，我们就结合小程序的场景，来看看如何做好小程序的监控。 本文转载至InfoQ大前端技术号「前端之巅」，作者慕扉，阿里巴巴高级前端工程师。 小程...

小程序的出身，基于安全和管控的考虑，使用了双线程的设计，同时对于 DOM 操作、动态创建 DOM 这些都隔离了。在写代码的时候，模版语法不支持函数计算等，computed 的方法就显得十分重要了。 自定义组件 小程序的自定义组件涉及功能很多，这篇只针对computed展开来讲。 computed比较适合较复杂逻辑的计算，同时在小程序无法在模板里使用method...

大家坐稳，我要开始装逼了。说好要讲小程序系列，替埋头苦干低调做事的开发哥哥们多讲讲小程序的故事吧。《小程序自定义组件知多少》《理解小程序的安全与管控》《解剖小程序的 setData》《关于小程序的基础库》《小程序页面管理与跳转》《小程序的底层框架》《小程序的诞生》《认识小程序云开发》小程序与 WebViewWebView 的飞速发展随着公众号的出现和繁荣，WebView 的使用频率...

喜大奔普，微信小程序可接入 ARMS 前端监控啦。阿里云监控可统计JS错误率，访问速度，API请求成功率，PU/PV，页面访问量，API链路追踪，地理分布，设备型号系统版本等等，还可自定义统计内容，很是方便。虽然官方文档写得很清楚，但不同框架和不同环境下的选择不同，本文供大家参考，少走弯路，快速接入。参考官方文档：https://help.aliyun.com/document_de...

临近年关，对于大部分互联网从业人员来说，都到了最忙的时候。在临近新春的时间，大家还要苦逼的忙着撸代码、测BUG、做产品设计、写文追热点，还要设计宣传海报，搞活动做用户回馈……就连产品、运营、开发等部门之间“神仙打架”的现象也并没有因为年终将至而减少。而在你疲于应对部门之间相互沟通的时候，你有没有想过，如果有一套资料，不仅能够帮助你提升自己的专业知识，同时还能对产品、运营、设计的知识能够更深入的...

在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用 css3 ，同时也可以通过 api 方式来实现。指路： 小程序animatiom动画APIAPI解读小程序中，通过调用 api 来创建动画，需要先创建一个实例对象。这个对象通过 wx.createAnimation 返回, animation 的一系列属性都基于这个实例对象。创建这个对象...

此计算器支持点击“=”后在计算，这样可以算出如2+3*4这种运算符高的在后的运算。 界面搭建功能按钮，因为样式等比较统一，所以使用wx:for循环来进行布局，每一个按键使用view控件。 wxml文件代码&lt;!--index.wxml--&gt;&lt;!-- 整体 --&gt;&lt;view class='body'&gt; &lt;!-- 底部的按钮 ...

一、小程序迁移是什么？小程序迁移”是指微信公众平台提供的，协助小程序帐号开发者将其小程序项下业务交由其他开发者的小程序承接、运营的功能和服务。迁移完成后，小程序的运营权限、主体信息将发生变化。二、小程序迁移流程  三、小程序迁移注意要点1、小程序原主体若已开通微信支付功能，迁移生效前须与原主体商户号进行解绑；若绑定支付服务商，暂不支持迁移。如需了解更多，请点击此处。2、...

此计算器支持点击“=”后在计算，这样可以算出如2+3*4这种运算符高的在后的运算。   界面搭建功能按钮，因为样式等比较统一，所以使用wx:for循环来进行布局，每一个按键使用view控件。 wxml文件代码&lt;!--index.wxml--&gt;&lt;!-- 整体 --&gt;&lt;view class='body'&gt; &lt;!-- ...

一、前言作者平时使用`mpvue`开发小程序，所以下面讲到的方法都是基于`mpvue`而言的，当然本质上原生小程序语法同样适用。 大家都知道，小程序的接口都是采用回调的方式，这样如果代码逻辑复杂了，将会导致代码难以阅读。今天就通过`ES6`的`Promise`函数，来稍微改造一下小程序接口，让我们的代码实现链式调用，便于阅读。 二、核心代码在utils目录下新建文件WXP....

相信有过实际小程序开发的人，都不陌生主程序app.json和子页面的XX.json文件中window字段的配置。 如果全局都是用app.json的一个样式，那么你就可以忽略掉此文。但是你想个性化单独设置各个页面的window字段，那么问题来了，你会发现：严格按照小程序官方的window格式来设置，就是不生效，查官方文档也没有解决办法，反正我是没找到 。。。 怎么以上问题呢，毕竟...

大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？解决方案wxParse小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。...

最近闲着踩踩地图的坑，一脚下去差点没从坑里爬起来，然后由于某个原因，去研究了微信小程序里面地图callout 这个属性callout呢，是在标记的点上面显示 一个 气泡，作为提示用最后展示下 效果 可以展示 顶部气泡以及监听被点击。  废话不多说，直接上代码 wxml&lt;map id="map" scale="{{scale}}" bindcontrolt...

使用微信小程序来实现一个图片选择器的功能，可以添加图片，可以删除图片，可以大图浏览选中的图片。 效果图下面说一下实现思路1.首先实现页面的布局整体图片选择使用一个view控件，前面选中的图片为一个block根据选择图片的数量来显示多少个，后面的选择图片按钮为一个view。选中图片上面的删除按钮，使用绝对定位和相对定位来处理。添加图片，删除图片，点击选中图片查看大图等添加一个...

项目中用到了 olami sdk把录音或者文字转化为用户可以理解的json字符串。效果图重要jS代码： //手指按下时 语音转文字 voiceToChar:function(){ var urls = app.globalData.slikToCharUrl; var voiceFilePath = that.data.filePath; if(voiceFilePat...

最近做H5开发遇到个问题，为了防止页面打开时，出现大图加载缓慢的情况，写了一个图片资源管理器，今天顺便实现了一下小程序版。 特别说明一下，小程序由于资源包大小限制，很多图片资源会存放到CND图片服务器上，为了实现小程序初始化时按需加载远程图片资源，实现了以下加载器，希望能解决部分小程序新人开发者预加载图片的苦恼。 特别强调：本加载器为初级版本，暂未研究其他实现方式，当前实现方式...

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。一、有好礼貌为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序哎设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户展示程序...

小程序海报组件https://github.com/jasondu/wx...需求小程序分享到朋友圈只能使用小程序码海报来实现，生成小程序码的方式有两种，一种是使用后端方式，一种是使用小程序自带的canvas生成；后端的方式开发难度大，由于生成图片耗用内存比较大对服务端也是不小的压力；所以使用小程序的canvas是一个不错的选择，但由于canvas水比较深，坑比较多，还有不同海报需要重...

一、效果图点击签到后二、数据库用一张数据表存用户签到的信息，每次用户签到都会往表中添加一条记录了用户id和签到日期的数据，如下图三、后端后端写两个接口，一个用于查询用户今日是否签到和签到记录总数，一个用于添加用户签到信息到数据库。这里用的是python的flask框架。（1）查询用户签到信息接口：@app.route('/get_sign/&lt;user...

当我们创建页面时  发现有个.wxs文件 发现有个.wxs文件，关于wxs文件如何使用呢？WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。wxs可以说就是为了满足能在页面中使用js存在的，在wxml页面中，只能在插值{{ }}中写简单的js表达式，而不能调用方法，例如直接在wxml页面中直接保留数据的小数点的后两位。...

自学小程序已有2个月，经手的项目及demo也已经让我快速入门当前最火热的语言之一，小程序确实有着移动APP不可比拟的优势，开发快，上线快，迭代也快......本篇简书文章只为给大家讲解思路及怎么处理，有任何不当之处，欢迎大家指出！！！ 结构解析：  剖析图1、不管是拿到何种需求，我们第一步骤不是直接撸起袖子就写代码，而是先把结构弄清楚，把UI拆分成N多小模块。① ...

 台接口返回一个数组，数组里面N多对象，每个对象里面几十上百条数据，最好玩的是，我只需要每个对象里面的某两个数据、、、、 类似这种：datas:[ { id:1000, name: "帅哥"， title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: "美女"， title: '...', ...

用户个人页面  为了便于以后的使用，所以把这个效果记录下来，以后直接复制粘贴本篇的代码。wxml&lt;view class='circle'&gt; &lt;view class='userAvatar'&gt; &lt;open-data type="userAvatarUrl" &gt;&lt;/open-data&gt; &lt;/view&gt; &lt..

 wxml  js1. `1 downImg: function(e) {`2. `2 var _this = this;`3. `3` 4. `4 // 获取图片地址(http://www.playsort.cn/...)`5. `5 var img = e.currentTarget.dataset.src;`6. `6` 7...

效果图//建立临时红包列表 var packetList = []; //建立临时红包图片数组 var srcList = ["../images/hogbao.png", "../images/hogbao2.png"]; //生成初始化红包 for (var i = 0; i &lt; that.data.packetNum; i++) { // 生成随机位置（水平位置） va...

 场景用于在线客服的聊天对话等 一、布局圈点1、三角箭头绘制一个26rpx*26rpx矩形，使它旋转45度，然后隐去对半，形成气泡上的直角三角形。&lt;!-- 画三角箭头 --&gt; &lt;view class="triangle" style="{{item.myself == 1 ? 'right: 140rpx; background: #7ECB4B'...

半年前，有机会开始接触微信小程序开发。却因为只是接触而并没投入开发小程序的过程中，因此对很多小程序的细节并未有充分的理解，仅仅停留在了解类似的理论层面，比如mpvue修改了 Vue.js 的 runtime 和 compiler 实现了编译及运行在原生小程序能力，比如原生小程序不支持npm包的使用及管理等，当然那时候的技术细节难点都是由非常给力的好同事解决消化了，所以也没多去细究。最近，我开始...

聊天会话场景用于在线客服的聊天对话等一、布局圈点1、三角箭头绘制一个26rpx*26rpx矩形，使它旋转45度，然后隐去对半，形成气泡上的直角三角形。&lt;!-- 画三角箭头 --&gt; &lt;view class="triangle" style="{{item.myself == 1 ? 'right: 140rpx; background: #7E...

在开发中，有时会遇到像App中的手势那样的效果，下面就仿照App实现了一下。wxml部分：&lt;view class="touch-container"&gt; &lt;view class="msg"&gt;{{msg}}&lt;/view&gt; &lt;image class="img" src="{{src}}" style="wid

话不多说先上图.gif  文章涉及技术点微信小程序原生Swiper控件Wxss Transform、Transition轮播条滚动回调控制微信小程序条件渲染、列表渲染全部实现代码加起来也就三四十行，大部分还用来写wxml UI代码，所以功能实现起来非常简单。首先将问题简单化，能用原生组件实现出我们想要的效果，绝不自己开发Component。原因：我懒+我自己写的...

好长时间以来，自己就有个想法为自己写一个音乐播放器小程序，以方便自己的使用，找网上的好多API，找不到，想抓接口，好多大厂都用了加密。结果自己仅仅整了点本地的数据。 只介绍一些具体的方法：// 解码&gt;&gt;中文 reconvert: function (str) { str = str.replace(/(\\u)(\w{1,4})/gi, function ($0) {...

|文档地址https://developers.weixin.qq.com/miniprogram/dev/component/radio.html创建一个空白项目开始着手将index.wxml与index.js替换成文档中的代码照搬文档中的代码并略作修改&lt;radio-groupclass="radio-group"bindchange="radioChange"&gt...

项目背景公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。效果图如下省份简写键盘如下:省份简写键盘英文简写键盘如下:英文简写键盘源代码目录结构目录结构wxml文件内容&lt;view wx:if="{{isShow}}" class="vehi...

微信最新的数据显示，目前已发布小程序数量为 100 万 +，小程序开发者已达 150 万 +，小程序日均打开次数 4 次，主动访问的用户量为 54%，从这些数据可以看出，小程序俨然已经成为微信生态体系中最重要的组成部分。昨天下午，微信公开课微信小程序技术专场在上海举行，会上，微信公布了面向开发者的技术规划，内容主要包括小程序技术能力与规划、小程序生态体系、小程序性能优化三个方面。小程序技术能力...

Page.prototype.setDatasetData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。setData() 参数格式setData(data, callback); // data需为可 JSON 化的数据，callback在 setData 对界面渲染完毕后调用setData() 非常灵活setData() 的第一个参数 da...

用 thinkjs 封装了个小程序支付的 Service 在这里记录一下，顺便梳理一下小程序支付的流程和思路。首先，先把官网的流程图放上来，然后按照图一步步的来。第一步：用户请求开发者后台，发起下单请求发起请求前在小程序端调用 wx.checkSession() 查看 session_key 是否过期如果过期了 重新调用 wx.login() 返回 session_key 和 openid如果...

一、获取access_token1、https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&amp;corpsecret=SECRECTCorpid和secrect是唯一的 access_token:有效期2小时二、获取code小程序调用wx.login获取临时登录凭证code，并回传到开发者服务器 三、获取用户idhttps://qyap...

今天是来杭州的第三个月后的十几天，正是的现在这份工作转正的日子。几天前转正面谈时 CTO 对于前几个月的工作给予了肯定，同时也提了几点建议。这也是这篇文章存在原因之一。要养成一些好的习惯、好的方法、并学会分享。这些好的习惯以后会跟着你走。来杭州三个月，也习惯了这里的生活。在新的公司做了两三个小项目，也研究了几个以前没有仔细研究的技术。小有收获。最近一周一直在忙两个项目，一是智能柜，二是景区。以...

今天是来杭州的第三个月后的十几天，正是的现在这份工作转正的日子。几天前转正面谈时 CTO 对于前几个月的工作给予了肯定，同时也提了几点建议。这也是这篇文章存在原因之一。要养成一些好的习惯、好的方法、并学会分享。这些好的习惯以后会跟着你走。来杭州三个月，也习惯了这里的生活。在新的公司做了两三个小项目，也研究了几个以前没有仔细研究的技术。小有收获。最近一周一直在忙两个项目，一是智能柜，二是景区。以...

开发背景现有系统已经有一套完整的接口，用户状态、验证都是基于 cookie 的。部分业务要上小程序版本，众所周知，微信小程序不支持 cookie 的。要上线的业务，最好的方式还是基于现有这套接口做，改动不大，也最快。模拟 cookie通过浏览器的开发工具，Network 栏查看请求，浏览器中的 cookie 会携带在每个 http 的 Request Headers 里面，用 Cookie 作...

前言在炎热的夏天里最美滋滋的事情是什么呢，我觉得当然是宅在家里，吹着空调，吃着零食看电视剧电影里的帅气小哥哥、漂亮小姐姐了！在闲暇时光我会经常用爱奇艺小程序看视频，加上现在已经学习了一段时间小程序了，“啪”，动手模仿一个爱奇艺视频小程序的念头就产生了。虽然现在还是个小白，但是希望在这趟“爱奇艺小程序之旅”上为各位乘客朋友好好开车（划掉，好好介绍我的问题与经验hhh前期准备微信开发者工具小程序开...

一场说走就走的旅行开始啦随着小程序的大热，作为一个程序猿，我也开始接触并且大概了解了一个制作小程序的一些过程，为了提高自己的动手能力，于是乎，我开始来仿写携程的小程序，来实现一些基本功能，在仿写的过程中，也遇到了一些难题，也有了一点收获，希望可以通过这篇文章与大家共同交流，共同进步。前言为了更好的开发，我们需要准备我们需要的工具：Vscode：这里主要用来具体代码的编写微信开发者工具：通过这个...

我去年3月份写了一个小项目 快毕业了，撸一个小项目(趣闻) 作为自己的毕设项目，当时接触 Android 也才半年的时间，所以写的略简单，偏入门级别的，有兴趣的话可以 clone 看一下。 趣闻小程序的火热程度我就不多说了，我之前对这个就蛮有兴趣的，于是花了大概5天的时间，完成了 学习-入门-写项目 这一套流程。作为前端 0 基础的我都这么快入门了，可想而知，微信小程序的封装是相当好的，基本上...

NBA总决赛结束还没一周，马上世界杯就如期而至。大家在熬夜看球，而我关在小黑屋默默码字（可怜脸）。在体验到小程序的 方便快捷省内存 之后，前段时间的“骑勇大战”果断用了小程序观看。由于体验不错，又正在学习小程序知识，马上就想动手实践学习一下“腾讯体育”小程序的制作。到目前为止，只想说一句“选择是好的，过程是一言难尽的”，虽然还没全部完成，但也遇到不少问题，希望此分享可以给你带来帮助。效果图（干...

写在前面小程序发布至今已有一年多时间，很多人都已经在小程序道路上狂奔。最近我也开始了学习小程序，学了一段时间后，想看看这段时间的学习效果，于是边学习边开始了我的第一个小程序。相信很多人都用过小红书吧，我可是被它安利了很多好东西呢，所以想着就仿写一个小红书的微信小程序吧。下面我就给大家“安利”几个我在写的过程中的“坑”。因为花的时间不多，功能有很多没有完善，页面写的不是很好看，请各位将就着看啦。...

引言现在的前端有各种各样的新知识和新框架，小程序才出生几年，就已经火到这种程度了，所以作为前端学习者，这个新技能我们是一定要尽快get到的。学习小程序最好的方法就是自己手写一个小程序，能从中找到自己的不足之处。于是我便萌发了一个新想法，自己手撸一个拉勾小程序。刚开始的时候，起步是有点难的，不知道怎么把学的东西转化成自己想要写的东西，但谢了一点后，感觉有点入迷了，停不下来。希望我写的东西能够帮助...

我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使（下面说明）所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation API来创建动画。接下来我带各位小伙伴如何让 transition 属性在这种需求中好使起来，下面上代码page({ data:...

之前帮别人开发的，只是花了一天的时间，做好了前端+后端，还有后台哦！！！很简单的一个小程序，就是表单+图片上传。下面是小程序的界面。代码结构手机版后台代码我就不贴了，直接整个打包。留言板小程序部署教程1、打开服务端文件夹，打开index.php，修改第二行的数据库地址，数据库账号，数据库密码，以及第7行的数据库名，保存。2、把服务端里面的所有源码上传到你的服务器的某个文件夹，文件夹自己创建，例...

前不得不说，SM.MS图床，很棒，速度快，免费，并且API也简洁、高效。中查阅微信小程序上传文件API：wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.weixin.qq.com/up...

初衷听说2018将是小程序爆发的一年，也许是随波追流吧，作为一名前端学习者，我也开始玩起了小程序，从原先在掘金看别人写的小程序项目，到如今不知不觉就自己倒腾了一个多月，也想做点东西练练手，于是有了这个小项目。项目介绍今年，青桔单车登录了我所在的城市，外形简约时尚，反正是特别喜欢。刚好我又在研究小程序，于是就想仿写一个青桔单车小程序的前端实现，大厂的项目还是很牛逼的，有不少提升体验的细节，值得学...

一、序Hi，大家好，我是承香墨影！最近在做小程序，验证一些方向，开发效率确实很快，就是各种微信的审核有点费劲，但是总归是有办法解决的。想要开发一款小程序，其实和我们正常写一款 App 类似，你需要有精美的前端布局，并且同时还需要处理和前端 UI 组件的交互以及它们背后的逻辑。最近会分享一些关于小程序的内容（不保证，想到哪里写到哪里），今天先说说接触小程序第一步：布局。如果有前端经验的话，小程序...

列表上拉下拉加载数据是再常见不过的功能，第一个想到的是scroll-view组件，里面有两个事件，分别是bindscrolltoupper（拉到最顶部）和bindscrolltolower（拉到最底部），用bindscrolltoupper实现上拉效果极差，稍微滑一下就触发，也就是说一言不合就下拉刷新列表，体验很差，网上百度了很久说是scroll-view不能和onPullDownRefres...

微信小程序的日历选择，主要针对酒店选择时间段的日历，带有公历的节日。主要函数： 通过选择入住与离店时间，记录对应的时间段，判断选择的开始时间和结束时间，通过改变背影颜色连成对应时间段。 selectDataMarkLine: function () { let dateList = this.data.dateList; let { checkInDate, checkOutDate }...

微信小程序已经出来挺久的时间了，之前只是在文档上粗略的看了一下，最近稍得空闲，便利用微信小程序平台写一个练手的项目，顺便学习一下小程序开发，感觉大体跟前端开发基本类似，但是因为是在微信的平台上运行，具体还是要根据小程序的规则来编写代码的，其中还是有部分的内容跟前端中常见的有所不同，于是接下来的博客里，也会顺手记录微信小程序开发过程中的一些坑，帮助后来的小程序开发者少踩一些坑，当然我踩的坑大部分...

话不多说，先来一张我科的图坐镇NBA资讯小程序出来啦作为一个刚接触小程序不久的前端小白菜，恰逢最近NBA如火如荼的双抢七大战、骑士与勇士又又又又又一次的巅峰对决(实话：真的看腻了- -),决定写一个NBA资讯的小程序来玩玩。下面讲讲小程序的开发开发工具：vscode 微信开发者工具开发技术：(Wxml)Html (Wxss)css javascript开发流程：注册一个appid就可以马上进行...

最近时常感叹道：时间总是那么的快，转瞬即逝。对于像我这种刚入门的小生来讲，技术每天都在更新，框架也层出不穷，有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢，一个好的建议便是静下心来写点自己的东西，哪怕你完成不了也应该尽力去写，老大曾讲过要去实践要去独立思考，你才能掌握很多你看似懂了却又很难处理的知识点。学习小程序的我已经...

应公司需求，着手开发一个同时部署到移动端和微信小程序上产品需求相同的聊天机器人。于是初步构想：移动端使用Vue.js开发。小程序使用美团点评的开源框架mpvue复用移动端代码集成到小程序。一般来说，根据官方文档将两个端分开来写，重复代码直接复制粘贴基本上就可以实现公司的需求。但一天忽然心血来潮，想把两个项目合二为一，只在Power Shell里改变一条命令，就能构建出适应不同平台的项目，于是就...