小程序

本文介绍微信小程序开发系列（二）开发组件使用的详解 一：开发组件使用初步 1：建立一个微信小程序的工程 2：请参考如下链接里面的内容，这是微信小程序的官方开发指南： https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=20161222 3：可以拷贝部分例子程序到你建立的工程中，使用微信小程序的组件，如图1所示：       我们在first.wxml中可以写first这个页面的布局，例如图1中我们写了一个字符串：“1234567890abcdefg”，在这个字符下面我们写了一个微信小程序的button，button显示的内容为“default”，type=“default”—这个是表示该button为默认的显示效果，如图1左边模拟器中显示为圆角淡灰色按钮左右两边无边距。      注：很多网友会发现：在微信小程序开发工具中编写完代码然后，点击微信小程序开发工具左侧下方的“编译”按钮后，模拟器中并没有反应，其实这是因为，你编写完代码应该敲击键盘的Ctrl+s，保存代码，然后再点击“编译”，这样才能在模拟器中显示出对应代码的效果。 图1 4：按钮显示内容和点击事件的绑定：       我们下面实现一个功能：点击按钮后，按钮的内容更换新的内容 1）在first.wxml中加入如下代码：其中bindtap=”btnClick”为按钮的点击时间绑定的方法：btnClick()，{{btnText}}为按钮显示的内容绑定的变量：btnText {{btnText}} 2）方法：btnClick()和变量：btnText都要在first.js中实现，如图2所示 图2    3）按钮点击前和点击后，模拟器显示效果如图3所示： 图3 5：text组件使用初步：       我们下面实现一个功能：点击按钮后，把text组件的初始内容进行修改，然后再点击按钮，text组件内容消失，然后再点击按钮，text组件内容出现。。。。。。以此类推。 1）在first.wxml中加入如下代码：…

微信公众号开发weui使用心得，避免少犯错！ 特别注意： 如果使用 jquery，则 jquery.js 一定要放在 的最后面，否则 weui 不起作用。 引用部分 weui 只需要加载 weui.css 即可 {% load staticfiles %} <link> 登录后复制 引用 weui 整个例子框架 head link css     <meta>     <meta>     <title>WeUI</title>     {% load staticfiles %}     <link>     <link> 登录后复制…

微信公众号中个性化菜单的开发实例 个性化菜单让公众号的不同用户群体看到不一样的自定义菜单。该接口开放给已认证订阅号和已认证服务号，个性化菜单要求用户的微信客户端版本在iphone6.2.2，android 6.2.4以上，暂时不支持其他版本微信，另外定义个性化菜单之前必须先定义默认菜单。 开发者可以通过以下条件来设置用户看到的菜单： 用户标签（开发者的业务需求可以借助用户标签来完成） 性别 手机操作系统 地区（用户在微信客户端设置的地区） 语言（用户在微信客户端设置的语言） 个性化菜单匹配规则说明： 个性化菜单的更新是会被覆盖的。例如公众号先后发布了默认菜单，个性化菜单1，个性化菜单2，个性化菜单3。那么当用户进入公众号页面时，将从个性化菜单3开始匹配，如果个性化菜单3匹配成功，则直接返回个性化菜单3，否则继续尝试匹配个性化菜单2，直到成功匹配到一个菜单。根据上述匹配规则，为了避免菜单生效时间的混淆，决定不予提供个性化菜单编辑API，开发者需要更新菜单时，需将完整配置重新发布一轮。 本例的项目结构如下，除了上一章的文件之外，还增加了三个处理个性化菜单的文件。 addconditional_menu.php：创建个性化菜单 trymatch.php： 测试匹配个性化菜单 delconditional_menu.php：删除个性化菜单 1、创建个性化菜单 创建个性化菜单的接口是https://api.weixin.qq.com/cgi-bin/menu/addconditional?access_token=ACCESS_TOKEN，以post方式发送菜单字符串。 addconditional_menu.php <?php require_once('./Utils.php'); //个性化菜单字符串 $menujson = '{ "button":[ { "type":"click",…

最近【视频号】已经开始内测，今天教大家怎么发布视频？ 微信视频号怎么发视频 1、首先打开微信发现页，找到【视频号】入口 注：如果不到的话，说明没有被微信内测到，下面有介绍申请开通的方法 微信视频号怎么申请        2、进来以后点击右上角的【相机】图标. 3、跟发朋友一样。可以选择本地上传也可以直接拍摄，然后发布就可以了。 推荐阅读：                   以上就是视频号怎么发视频的详细内容，更多请关注米云其它相关文章！

小程序和公众号可以同名了。 具体规则 1、同一个主体的小程序和公众号可以同名 如果你的公众号、小程序在微信公众平台上的名称是唯一的，且属于同一主体下，那么它们可以同名了。 例如：公司A拥有公众号【微信公开课】，同时可申请小程序【微信公开课】，反过来也成立。 2、同一主体下存在多个重名公众号，可以同名 由于历史原因，你可能在早期申请了多个重名公众号，那么你的小程序依旧能申请使用这个名称。 例如：公司A早期申请了多个公众号【微信公开课】（第一个）、【微信公开课】（第二个）、【微信公开课】（第三个）,仍可申请小程序【微信公开课】。 3、不同主体重名公众号，不能同名 要是存在这样一种情况：你和其他一个或多个主体使用相同的公众号名称（由于微信公众平台早期允许），那么这个名称在小程序内就不能被使用。 例如：个人A和公司B同时拥有公众号【张三】，则【张三】的名称在小程序内不可被申请使用。 4、同主体下，名称后缀“+”仍然可用 公众号和小程序名称均不与其他重复的情况下，可支持同主体申请名称添加“+”后缀，这一点对公众号和小程序都适用。 例如：公众号【微信公开课】的主体，支持申请【微信公开课+】小程序。 推荐：《》 以上就是公众号可以与小程序同名吗的详细内容，更多请关注米云其它相关文章！

小程序是一个易上手的东西， 对于新手来说，多看官方文档，可以初步做出比较完整的小程序，正是因为简单上手，功能实现简单，小程序是越来越火，商业价值也越来越大。本文我们将教大家一种微信小程序-仿盒马鲜生。 项目初览 盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态，热度十分。 项目功能 * 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面 登录后复制 登录后复制 小程序设计过程 小程序是一个易上手的东西， 对于新手来说，多看官方文档，可以初步做出比较完整的小程序，正是因为简单上手，功能实现简单，小程序是越来越火，商业价值也越来越大。 1.项目工具和文档 微信web开发者工具：微信小程序官网  这是个比较好用的编辑器，对于小程序编辑很方便。 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。…

摘要：招行经过一年多的发展，2014年已超过1500万粉丝，高居银行类公众号榜首，堪称最成功的微信公众账号案例。深圳云软作为招行信用卡微信平台的研发厂商，就微信公众账号开发的高级应用，总结了以下几点经验。 2013年4月，招商银行信用卡微信公众账号以“小招”的亲民形象推出，不到半年时间即获得数百万用户的青睐，经过一年多的发展，截至目前已有超过1500万粉丝，高居银行类微信公众号榜首，堪称最成功的微信公众账号案例。深圳云软作为招行信用卡微信平台的研发厂商，就微信公众账号开发的高级应用，总结了以下几点经验。 规划要超前 大部分企业在规划时，抱着试试看的态度，投入不足，仅是因为领导说要做微信而做微信，并未做长远打算，导致浅尝即止。很多微信公众账号只是挂了个链接链到页面，做个微网站，没有深入考虑怎样通过良好的体验把企业的服务提供给客户。一个超前的规划，首先必须选好平台——具有稳定合理的架构，足够的业务灵活性和开放性，可以逐步叠加和发展业务，可以灵活调整体验，可以对接后端的各种系统资源等。 架构要合理 微信平台不是一个单纯的链接入口，它更是连接企业服务与用户之间的管道。因此微信平台需要有合理的架构设计，使平台能在不同的交互模式以及各种形态的服务资源之间灵活地进行切换，并保持良好的体验。总的来说，微信的交互包括：点击菜单的轻App体验、聊天窗口的消息交互、页面的交互三大类，其中消息交互又包括自动消息交互和人工消息交互。从长远的规划看，平台需要满足以下要求： 1. 高性能和高可用； 2. 容量的可扩展性； 3. 可监控、可管理； 4. 业务可扩展，可以灵活进行业务变更和加载； 5. 开放性，可由客户进行业务流程的二次开发，提供标准化的接口与第三方系统进行对接，包括接入多种IM渠道等。 我们很多客户都已在应用或规划全渠道接入，可以实现微信、微博、QQ、WebChat、邮件等多种模式。 平台架构上很多细节的设计，都是来自业务及运营的需求，如下所示。 1. 对并发量的要求，决定了接口设计的模式，采用异步、无状态、多线程的接口模式，才能满足超大并发量的处理，并且易于扩展。招行目前每天发出的消费提醒，就达到400万条，高峰期半个小时可达20多万条。 2. 对可靠性的要求，决定了缓存的持久化，保证了即使某个节点的程序宕机甚至物理故障，也不会丢失交易数据。我们早期的方案也存在缺陷，在特殊的情况下如果接口程序崩溃或者重启，就会使发送队列中的数据丢失。虽然量不大，但对银行业务却很重要，会导致用户的投诉。 3. 数据库性能对DB交易量的支持，以及对分布式架构的要求，决定了数据库中间层的存在。一个好的架构，不仅要支持单个数据库把性能发挥到极致，还要考虑服务器硬件如果出现瓶颈也能进行扩展，因为数据库由于计算能力、I/O吞吐、存储等多方面的原因，始终会在某个点达到无法超越的瓶颈，就像12306，当海量的用户请求在短时间内涌入时，会给系统带来极大的压力，整个系统的最后瓶颈往往就是数据库，解决的办法就是采用分布式解决方案。云软IMCC在架构上支持横向和纵向的扩展，理论上只要网络带宽许可，就可支撑无限容量。 4. 通信连接的效率，微信的协议是HTTP双向POST的协议，采用短连接方式。这种通信方式其实效率是很低，每次请求都需要建立连接、释放连接。对于单个服务节点，其性能远低于TCP长连接，协议的字节冗余也比较多，对传输带宽要求较高，但好处在于可以方便地通过多节点进行扩展，开发的难度也较低。随着计算机性能和网络带宽的提高，以前要按字节来节省的传输数据量已可被忽略，短连接方式以后会得到广泛的应用。虽然我们平台内部的通信采用TCP长连接，在百兆网络环境下最高可以达到每秒数万次的消息量，效率高很多，但缺点是对开发的要求比较高，需要处理很多网络异常事件，也不便于多节点扩展。 招行轻体验、重后台的体验设计 招行在微客服产品上的设计充分体现了“关注用户体验，重视服务细节”的用心服务理念。虽然招行在微信平台上实现了其传统客服和App上超过70%的业务服务功能，但在用户体验上你会觉得很清爽，很多功能你不用的时候都是躲在后面的，展示出来的只是最常用的功能，而一旦你需要，通过简单直接的操作，就能获得，正所谓呼之即来，挥之则去，不用的时候绝不占你眼球。比如你对小招说：“境外消费”，小招就能很快找到所对应的答案以及兑换手续费等相关问题。配合招行后来提供的语音识别功能，更是将操作简化到说到就能做到的程度。这种模式我们称为平铺模式，相对以往需要通过多级菜单、多次交互才能找到自己想要的功能，平铺模式可以做到所想即所得，特别对于微信这样的移动终端，展示的容量有限、操作输入不方便的情况下显得更加方便。…

作为常见的项目开发习惯了，复用度高的代码都想提取出来，哪里需要就进行传参调用就可，初涉微信小程序的圈子里，毕竟会受新的规范限制，在此整理一下简单的 外部公共 js文件的引用、使用。 使用方法 以个人开发项目中页面跳转的功能为例，简化其中的代码，参考步骤如下： ①. 外部 js文件的处理 针对于被引用的外部公共js文件，可自行定义需要的函数，重点在于，后面需要使用 module.exports，进行方法的暴露才能被其他 js 文件使用 exports: 通过该属性，可以对外共享本模块的私有变量与函数推荐参考文章： 微信小程序（模块化）  官方解释请参考：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/01wxs-module.html ②. require 引用js文件 在当前的 js文件中，使用 require()  方法，正确传入路径文件 var common_js = require('../../utils/common.js') 登录后复制 个人测试发现，对于外部文件的引用，请尽量使用相对路径  并且，require() 方法的调用位置，不受限制，个人习惯在文件顶部就开始引用而已.…

以下是微信小程序开发一周总结，希望对米云的同学有帮助。 编辑器 我直接用 vscode（其它编辑器同理，预览还是用的微信开发工具），语法高亮将 wxml 设置成 html, wxss 设置成 css "files.associations": { "*.wxss": "css", "*.wxml": "html" } 登录后复制  也可以安装小程序相关插件 开始写代码 首先需要完整看完微信小程序文档（，组件和 ），方便后面用到时查找。 view 组件对应 html 里的 p text…

最近在做小程序项目，发现小程序的页面间经常需要传递一些数据。根据自己的了解和熟悉，针对不同的数据要求，总结到有几种不同的传数据方式，下面做一下简单的介绍归纳。 第一种：页面跳转时通过url传递 使用wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候获取且初始化。 //pageA.js // Navigate wx.navigateTo({ url: '../pageB/pageB?name=lin&gender=male', }) // Redirect wx.redirectTo({ url: '../pageB/pageB?name=lin&gender=male', }) // pageB.js ... Page({ onLoad:…