标签：至少1个，最多5个
微信小程序公测后，开发者非常热情，都有很高的期待，都想抓住这一波红利。但是热情背后需要冷静，我们需要搞清楚两个问题：
微信想要我们做什么？微信小程序可以做什么？
微信想要我们做什么？
首先来弄清楚微信的意图。之前张小龙曾公开过对微信应用号的一些看法，再联系到他总结的微信产品观，大概可以总结出如下重点：
（1）服务用户，不打扰用户，用完即走
张小龙这种朴素浪漫主义情节一直反映在他的微信产品观中，小程序也不例外。从人性出发，用户被任何APP每天占据大量时间都是不合理的，微信也是——虽然它已经实现了。这个幸福的负担也就成了微信的枷锁（或者说是张小龙的枷锁），一旦出现决策偏差或用力过度，影响范围不可想象，稳健或许是微信最可行的方针。相应地，小程序也要贯彻这套产品观。小程序的设计规范里，不允许推送、不允许转发至朋友圈、不允许诱导关注，一而再地强调服务导向，用户主动寻找服务，用完即走。
（2）刺激微信生态
微信已经不年轻了。想想微信这几年的发展，曾几何时，摇一摇、群对话、朋友圈、抢红包，几乎包围了我们的生活。然而现在，有多少人关闭了朋友圈提醒？有多少人对所有微信群设置了消息免打扰？又有多少人，在朋友圈里已经看不到熟悉的人的名字？某种意义上，逃离碎片化时间几乎等同于逃离微信。而与此同时，这些年又有大量的第三方应用，通过微信得到了巨大的流量红利，比如脸萌、天天P图、微信群助手、还有各种曾经刷爆朋友圈的H5小游戏，等等。这份蛋糕，微信其实也可以自己吃掉……
无论出于防守还是进攻，微信都需要新的突破。小程序实际上是一种众包行为，通过第三方共同塑造一个更完整的微信生态，提供更多新的可能，也提供更多试错，根据用户反馈不断调整策略。微信在设计规范中明确提出不允许开发与现有服务类似的功能，也印证了这一观点。这对微信和第三方来说，都是一种双赢。
（3）服务号未实现目标，小程序予以补充和提升
并不太具备存在感的服务号，显然并没有实现微信对它的期望。服务号上线之初，也是希望可以在消息列表中为用户提供更多样化的服务，同时也提供给那些低频工具或商户，一个连接用户提供服务的可能，免除独立开发APP的成本。然而受入口位置、推送频次、交互展示、功能等限制，大部分服务号只不过是企业多了一个消息推送号，并没有拓展出新的领域。
（4）流量变现
对于变现，微信一直做得很谨慎。然而开放小程序，使得微信可以较好地保护现有的用户体验，同时又增加出更多向B端实现流量变现的场景。
微信小程序可以做什么？
考虑微信诉求的同时，也需要看看微信的能力。对我们这些应用者来说，微信小程序的实际价值在于：
（1）流量入口
毋庸置疑，微信的流量有多大意义，看看现在这些围绕微信的商业模式吧。
（2）社交关系
微信作为最庞大的社交关系链，这对于任何一家公司来说都是非常有意义的。积淀在微信中的熟人关系、行业关系、社群关系，已经形成了极具说服力的用户分层，这些圈子可以帮助任何一家公司直达目标用户，尤其是自身尚未利用社交优势的APP，完全可以借助微信的社交关系链助力自身业务。
（3）用户数据
即便是对社交关系没有太多期待，用户数据本身也足够有价值了。在用户授权的前提下，如果能获取到用户的社交关系、社交内容、位置信息、使用频次等数据，无论是要精准获客、精准营销还是精准变现，都将带来极大的帮助。
（4）提升体验
比起之前的服务号，小程序支持更丰富的功能和交互，给设计者留下了更多发挥空间，无疑会给用户带来更好的使用体验。根据目前内测的小程序表现，小程序的体验流畅度远高于预期。
那到底该如何设计小程序呢？设计思路应该从以下5个方面入手：
（1）不要局限于工具思维，而是基于服务做拓展外延
很多文章都在聊小程序目前最好做的是工具。话虽然没错，但不要局限于工具思维，最核心的仍然是服务。从目前你所在的业务大类出发，用户究竟需要什么样的服务？用户在进入APP前和离开APP后，场景上需要有什么补充？可能分析下来和你的APP主营业务并不完全一致，没有关系，只要能达到你对微信小程序的预期就可以了。举例来说，如果一家阅读类APP只是单纯将内容聚类和搜索的功能移植到微信小程序，并不能给用户带来更多期待，也很难做到让用户主动去唤醒小程序。如果跳出APP主营业务，回归阅读这件事本身，用户在开始阅读之前如何引起阅读兴趣？阅读之后是否有摘录的需求？这时候，或许深挖摘录这个点会比直接做内容更有意义。
（2）融入微信生态
时刻记得微信小程序是在微信内，与微信的所有功能息息相关，要尽可能深入地融入微信生态，不要孤立地做设计。微信小程序是微信生态的一部分，更是衔接用户、服务、信息三者的重要载体，在设计之初就要考虑到生态的搭建和后续扩展。继续说阅读类APP，如果确定要通过摘录做切入点，那么摘录的来源可能是公众号推送的文章、群聊天记录、或者是自家服务号推送的活动信息，让你的小程序融入整个微信，并为后续服务升级、用户体系升级、变现模式、或者是衔接微信的其他功能服务留好余地。
（3）自有APP切入社交关系
微信的社交关系链是个大宝藏，从这个点切入和微信的使用场景做结合，用户也更好接受。而更有意义的是，利用微信小程序获取用户社交关系，拓展自有产品的业务模式和服务范围。仍以阅读类APP为例，假设上述的摘录需求和社交做结合，在摘录中可以二次批注，相互交流，不断深挖，既能把主营业务和社交结合起来，又符合价值化、轻量化、略带浪漫主义情节的微信产品观。
（4）如果不能直接分享到朋友圈，那就换一个姿势分享
相信获取流量是各家都想实现的目标，分享功能依然重要。如果微信不允许直接分享到朋友圈，那么就在聊天上多下功夫，一个群聊内的分享并不一定比朋友圈差。又或者，使用其他手段将你的微信小程序暴露在朋友圈里，间接实现分享的目的。再次，还有扫一扫和搜索可以利用。总之，在不触犯微信规则的前提下，尽可能扩大你能接触到的用户范围。
（5）胜在轻巧
微信小程序的设计方案需要遵从轻巧的原则。这两个字要分开来看：一个是轻，即轻量，用户能够快速进入，快速享受到服务，快速离开，使用过程中没有心理负担；一个是巧，即巧妙，创意永远是制胜法宝，仅仅移植web或app的功能很难达到预期的目标，只有为微信小程序量身订制、富有创新、充满心意的设计，才能稳稳把红利抓牢。
「H5程序俱乐部」是一个专注微信小程序学习交流，相关外包/招聘需求信息发布的微信公众号。
「H5程序俱乐部」微信号：wxappclub 或者 微信扫一扫关注
0 收藏&&|&&1
你可能感兴趣的文章
8 收藏，19.6k
46 收藏，4.7k
1 收藏，1.5k
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：微信小程序开发的多种类型模板有什么作用？
目前微信用户高达8亿多，公众号1000多万个，带动消费1742亿元，用户平均使用微信日均4小时以上，相对于APP软件来说，小程序不需要下载安装，相对于公众号小程序用户不需要关注即可使用，便捷的操作引起大众的喜爱。但小程序最初上线是可以没有这么受欢迎，是随着如今多个功能的开放，以及为商家提供了丰富的体验，微信小程序开发才有了现在的火热。
对于商家来说，小程序开发坐拥微信8亿用户群体，减少获取用户难题;并且可以将商家信息、产品介绍上传至小程序，通过小程序快速展示给客户，提升企业品牌传播力，品牌知名度，抢占亿级流量入口;不仅如此，商家可通过小程序实现在线销售，在线下单，建立自己的小程序线上商城，打通线上线下，快速实现“新零售”布局。
另外，通过最新功能“自定义关键词”设置小程序的相关关键词，让用户在搜索关键词的时候可以快速展现出来;小程序还支持转发分享给好友，微信群，通过社交渠道快速推广小程序。
了解了这么多小程序的优点，现在来说一下天店通小程序的类型吧。
目前天店通小程序开发分为两种：一、定制开发，可根据用户具体需求按需定制，板块布局、功能设定、界面设计等都可根据用户的具体要求定制。
二、自助生成，天店通小程序平台上有众多行业模板，企业可根据自己的需求选择相应的模板，通过天店通平台快速生成自己的小程序，无需开发，节省开发时间以及开发成本。
天店通小程序的模板类型有哪些?
1.小程序商城(已上线)
商家可通过小程序商城实现产品展示、在线下单、物流配送等网络销售功能。
2.小程序官网(已上线)
小程序官网可便捷的展示企业信息产品及服务信息，并可快速传播。
3.小程序拼团(开发中)
小程序拼团是最有效的营销功能之一，可以快速聚拢用户、提升销量。
4.小程序点餐(开发中)
餐饮企业可利用小程序点餐让消费者便捷点餐、就餐，提升用户体验。
5.小程序预约(开发中)
基于小程序预约，服务型企业可实现在线预约、下单等O2O服务。
6.小程序同城(开发中)
小程序的出现，让同城服务更加便捷，快速打开、订购、预约、上门等。
7.小程序酒店(开发中)
小程序酒店基于微信小程序的便捷性集约化，极大的提高用户服务体验。
8.小程序社区(开发中)
小程序社区在微信生态系统的框架下，让交流、互动更加便捷、快速。
天店通小程序生成平台，快人一步，自动生成小程序，预约体验：
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
天店通涵盖微分销、拼团购、微信红包等多种功能，每天开放20个名额，永久免费。
天点科技专注于手机APP开发、企业网站定制以及微信二次开发。
今日搜狐热点一、关于微信小程序
1.1 小程序诞生的背景
　　张小龙说道：
　　（1）一切以用户价值为依归&用户是微信的核心，所以微信中没有很多与客户无关的功能，比如QQ中的乱七八糟一系列东西。
　　（2）让创造发挥价值&所有围绕微信的创造比如公众号都应该发挥其应有的价值。
　　（3）用完即走的高效服务&这一点就厉害了word天，微信要打造一个以微信为中心的生态链，不以绑定用户为目标。比如生活中有一些不太常用的app，我们可能一年也使用不了几次，但是有时候就需要用到，微信就想要提供这样一个平台，让你可以在微信中使用这中所谓的app的功能。或者说可以这样理解，让微信成为一个类似于Windows的操作系统，各种小程序就是操作系统上的应用软件。
　　（4）无形存在的商业化&微信使得人与人之间的联系变成了无形的商业化网，这个网可以创造很多无形的商业价值。
1.2 小程序是个什么鬼？
　　张小龙在朋友圈里这样解释道：小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
1.3 技术层面的小程序
　　微信小程序 = XML + CSS + JS 的移动应用程序
1.4 为什么要开发微信小程序？
　　（1）更好的给用户提供用完即走的服务
　　（2）给用户提供更好的使用体验
　　（3）功能更加深入：
　　（4）设计更加统一：
　　（5）类似于微信钱包中的第三方服务
二、开发工具的安装
2.1 下载微信开发者工具
　　Windows 64位：
　　Windows 32位：
　　Mac 版 ：
2.2 安装微信开发者工具
　　这里我使用的是wechat_web_devtools_0.10.版：
　　　　安装完成后，第一次启动时会出现一个二维码，需要使用微信扫描该二维码才可登录开发者工具：
三、第一个微信小程序
3.1 添加微信小程序项目
　　Step1.选择调试类型：本地小程序项目&添加项目
　　Step2.由于我们暂时没有AppID，所以选择无AppID（无AppID部分功能会受限）
　　Step3.进入开发者工具界面，默认是选中&调试&面板
　　可以看到，在调试面板中，左侧是页面效果预览窗口，右侧是类似于Chrome的开发者的工具。在预览窗口可以选择一些常见的手机型号和不同的分变率，大家可以看出这简直就是Chrome开发者工具的翻版。
3.2 微信小程序结构一览
　　新建了一个小程序之后，开发工具为我们默认生成了一些文件，下面我们来看看这些文件都是看些什么用，以及程序结构又是什么样子的。
　　（1）项目结构
　　（2）应用程序级文件
　　① app.js
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
globalData:{
userInfo:null
　　app.js定义了全局的一些重要事件，比如程序启动时要做些什么，如何获取微信用户信息等等。App函数是一个全局函数，它的作用就是用来创建一个应用程序实例，每个应用程序都会有它的生命周期，因此一些重要的生命周期事件都会在这里定义。例如，onLaunch事件就是程序在启动时需要干什么。
　　② app.json
"pages/index/index",
"pages/logs/logs"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Manulife WeChat Demo",
"navigationBarTextStyle":"black"
　　app.json 则定义了程序有哪些页面，以及窗口标题及相关样式等。例如，我们再这里将navigationBarTitleText属性值改为了Manulife WeChat Demo，来看看调试窗口会显示什么？
　　③ app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
　　app.wxss 则定义了全局样式，你可以把它理解为一些所有页面公用的css样式。其实，它也就是一个披着wxss后缀名的css3样式表而已。
　　（3）具体页面级文件
　　① index.js
//index.js
//获取应用实例
var app = getApp()
motto: 'Hello World',
userInfo: {}
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
　　每个页面的业务逻辑都会写在各自的js文件中，可以看到index.js中所有的业务逻辑都会写到Page中，而app.js中所有逻辑都写在App中。
　　② index.wxml
&!--index.wxml--&
&view class="container"&
bindtap="bindViewTap" class="userinfo"&
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&view class="usermotto"&
&text class="user-motto"&{{motto}}&/text&
　　index.wxml则类似于html为页面定了一个具体的div区域，通过类似于AngularJS的模型绑定将具体的数据绑定到具体的位置。这里再回到index.js中就可以看到原来在index.js中就是为了给这些模型赋值。另外，wxml=&weixin markup language.
wxml语法遵循XML语法，注意是XML语法，不是HTML语法，不是HTML语法，不是HTML语法
　　③ index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
.userinfo-nickname {
color: #aaa;
.usermotto {
margin-top: 200px;
　　index.wxss则和app.wxss一样，都是css样式表，只是index.wxss主要针对于index.wxml这个页面，它有明确的作用域。另外，wxss=&weixin style sheet.
　　（3）微信小程序总体结构
　　我们的微信小程序会启动时会生成一个app应用实例，这个app实例会运行多个page，每个page之间又会有一些关联。多个page都需要用到的一些功能则封装到公共方法中，例如util.js,calc.js等等。
3.3 最小化编程体验
　　（1）添加一个文件夹test，新建三个页面级文件。
　　不要问我为什么要这样子命名，就像我们在ASP.NET MVC中Action与View的名字要保持一致一样，这是一个约定俗称的事儿。当然，你也可以新建一个文件夹，不叫pages，然后在那个文件夹里边定义这些页面。只需要在app.json中配置成另外的文件夹即可。
　　（2）修改app.json，添加页面设置
　　app.json中定义了一个pages数组，每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。因此，这里我们将刚刚的test页面假如pages数组，并放到首位。
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
　　（3）编辑test.wxml，添加一句hello world!
　　按照国际惯例，每次学习一个新的语言我们都会输出一句hello world!来代表我们的第一个程序，因此这里也不能免俗。
&text&Hello WeChat Little App!&/text&
　　（4）编辑test.wxss，添加一个样式，为刚刚的hello world文本设置为红色字体
font-size: 14pt;
color:red;
&text class="hello"&Hello WeChat Little App!&/text&
　　（5）编辑app.js，定义一个全局使用的函数getMessage，方法很简单，就不再多说
// 一些自定义的额外方法
getMessage(para){
var result = "Your name is " +
　　（6）编辑test.js，调用全局函数，输出控制台
//通过getApp方法获取应用实例
const app = getApp()
// 在test页面加载时调用全局方法getMessage
const msg = app.getMessage("Edison");
// 在控制台输出msg结果
console.log(msg);
　　（7）编辑test.js，为页面添加一个数据供页面绑定
errorMessage: "User name can not be null!"
&text&Hello WeChat Little App!&/text&
&text class="hello"&{{errorMessage}}&/text&
四、调用服务加载数据
4.1 关于REST服务接口
　　这里就可以把我们的REST服务弄出来调用啦，不过这里我们采用已有的公开的API接口来调用，比如的各种电影、读书等就提供了一些API可以供调用。
　　这里我们选择豆瓣电影提供的一些API，对于下面的这个list页面，使用的是&即将上映的电影&的接口：
4.2 添加必要文件
　　添加新文件夹：list，并添加三大页面级文件
4.3 调用API发起小请求
　　首先我们可以通过查看微信小程序官方开发文档，看到发起请求的示例代码如下：
wx.request({
url: 'test.php',
"Content-Type":"application/json"
success: function(res) {
var data = res.
　　因此我们依样画葫芦：
//通过getApp方法获取应用实例
const app = getApp()
message:"Hello Edison",
const currentPage = this
// 在list页面加载时调用api获取数据
wx.request({
url : "/v2/movie/in_theaters",
"Content-Type":"application/json"
success: function(res) {
var data = res.
currentPage.setData({
list : data.subjects
　　编辑list.wxml，添加一个列表：
&text&{{message}}&/text&
&view class="item" wx:for="{{list}}"&
&text&{{item.title}}&/text&
　　再来给每个item项设置一下样式：
border: 1px solid #000;
font-size:12pt;
　　这时可以来看看效果，电影列表被加载了出来：
　　我们发现这个api还返回了电影的海报，因此我们还可以改造一下程序，在列表里边将海报也显示出来：
&text&{{message}}&/text&
&view class="item" wx:for="{{list}}"&
&image src="{{item.images.large}}"&&/image&
&text&{{item.title}}&/text&
　　这里我们加了一个image标签，注意不是html的img标签。这时，再来看看界面效果：
4.4 预览你的小程序
　　如果你有AppID，那么你就可以开始预览你的小程序了：
　　开发者工具左侧菜单栏选择&项目&，点击&预览&，扫码后即可在微信客户端中体验。这里我们是无AppID的体验模式，因此没法预览，更没法上传。
五、豆瓣电影示例项目
5.1 项目地址
　　这个项目是我看的一个公开课的讲师写的一个demo，功能虽小但五脏俱全，是一个拿来学习练手的小项目。
GitHub仓库地址：
5.2 项目功能
　　前方流量预警，gif动图，你懂得：
5.4 学习计划
　　汪磊专门为这个demo设置了一些分支，每个分支循序渐进，实现了不同的功能。我们可以跟着这个计划，一步一步得去完成这个demo。
　　本篇了解微信小程序是个什么鬼，最基本的小程序结构是什么样子的，还按照国际惯例做了一个hello world，并调用了一次api。虽然过程很简单很low，但前端程序包括app不就是做的这些事儿吗？后续我会跟着汪磊的demo一步一步得把那个豆瓣项目写出来，或许会分享一篇新的文章跟各位见面。好了，很久没有熬过夜了，今天就到此结束啦。
（1）汪磊，《》
（2）汪磊，《》
（3）劳卜，《》
（4）白琦，《》
（5）官方文档，
阅读(...) 评论()如何入门微信小程序开发，有哪些学习资料？ - 知乎12916被浏览694371分享邀请回答mp./debug/wxadoc/dev/?t=93：设计指南：4：设计资源下载：资源下载5：微信小程序公测接入指南：6：微信小程序支付文档：7：新手入门宝典：8：免费视频：9：实战宝典：10：从注册到上线系列：11：精品合集：导航系列：1-6月7月8月特别说明：1：不了解微信小程序的同学，请先搜索一下微信小程序究竟是什么，有哪些特性；2：有htmlcssjs基础者可以直接进入实践，边实践边学习，尤其是有react与vue基础的；3：微信小程序不需要特别申请（认证或账号）即可开始使用工具开发；4：微信小程序是需要后台的，不限定任何语言，提供小程序接口要求的json格式即可；5：初次开发者，推荐阅读新手跳坑系列，有几个坑，先了解一下，遇到时便可以查阅了；6：如有作者不希望自己的作品被放置在这里，请联系我删除；7：如果遇到问题，推荐多使用搜索，对帖子及文章进行搜索；微信小程序大事记编年史：旨在让大家独立去思考变化的意义：（日期非精确，仅为大致日期）12月21日：微信小程序开放新增功能：分享，自定义模板消息，客服消息，扫一扫；12月30日：微信开放带参数二维码，允许已上线的小程序制作进入任意页面的二维码；1月9日：微信开放微信小程序；1月22日：微信增加社交分类，允许提交社交类小程序，但是必须具备社交相关的资质证书；1月25日：微信开始允许直播类小程序上线，上线的有腾讯now直播，企鹅电竞等；2月1日：微信开放微信搜索，在微信搜索结果内将可以直接展示小程序，并且位置是第一位；但是仍需全名搜搜方可显示；2月10日，微信开放部分关键词的模糊搜索显示，包括表情、美食、音乐、电影、读书、日记、计算、股票、日历、电商、酒店、出行、汽车、旅行、快递等领域；2月19日：微信开发者社区从封闭状态，改为开放状态，任何人均可浏览；2月23日：摩拜单车宣布原二维码也可以适用于小程序，使用微信扫一扫扫描摩拜单车二维码将直接打开小程序；3月2日：微信公开课征集小程序案例3月5日：马化腾回记者问中提出：小程序是面向未来的产品：马化腾：微信为什么力推小程序？微信公众号会推付费内容吗？ ...3月27日，微信官方宣传六大变化：3月27日：微信官方宣传支持个人注册：3月30日：附近的小程序：4月14日：微信开放长按识别小程序二维码功能；4月17 日：4月18日：4月20日：4月21日：4月25日：4月27日：4月28日：5月8日：开放群ID接口，可获取群ID和群名称5月10日：开放“附近小程序”5月12日：上线“小程序数据助手”，支持实时查询小程序数据5月19日：新增页面内转发功能；支持接入微信运动步数数据等5月27日：小程序码生成数量无限制；用户画像支持分析小程序数据6月1日：公众号群发文章通过文字或图片链接打开小程序功能6月3日：小程序新增推广功能，支持自定义关键词6月14日：6月21日：7月6日：7月12日：7月21日：7月26日：8月3日：8月5日：8月18日：8月19日：8月25日：8月31日：9月8日小程序资讯集合 9月8日小程序Demo集合 9月1日小程序资讯集合 9月1日小程序Demo集合8月25日小程序资讯集合 8月25日小程序Demo集合8月18日小程序资讯集合 8月18日小程序Demo集合8月11日小程序资讯集合 8月11日小程序Demo集合8月4日小程序资讯集合 8月4日小程序Demo集合7月28日小程序资讯集合7月28日小程序Demo集合7月21日小程序资讯集合 7月21日小程序Demo集合7月14日小程序Demo集合 7月14日小程序资讯集合 7月7日小程序资讯集合 7月7日小程序Demo集合7月7日更新小程序资讯 7月7日更新6月23日更新小程序资讯
6月23日更新
5月8日更新：--------demo更新：
插件/工具更新：
--------5月4日更新：--------特殊合集：
微信小程序项目总结系列：作者：Tong_T，博客地址：Tong_T的博客 - 博客频道 -
--------跳坑系列更新：
--------开发前必读简要
基于大量无效开发，无法上线的案例，所以开发前部分知识十分重要；|
微信小程序个人注册简单步骤
打开，点击右上角立即注册，进入小程序注册|
微信开发者工具【项目】详解
为什么我的小程序通过审核，但是搜索不到呢？原因是必须在后台内点击发布，才会发布；|
小程序开发上线（发布）步骤
这篇帖子将简单的介绍基本的步骤，以便新手们建立一个基本的印象；|
从零开始：微信小程序新手入门宝典
为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里； |
安卓或ios开发者学习小程序指南
我发现很多安卓或是ios开发者，学习了小程序的开发，并且很顺利。 |
WXSS/CSS相关知识说明
为了更适合开发微信小程序，WXSS对 CSS 进行了扩充以及修改。|
使用官方WEUI-WXSS相关知识
使用官方 UI 简化设计开发流程，如果你的项目对 UI 定制要求不是很高的话。| 常用api域名配置列表及免费API集合
免费API大全以及后台配置域名的方法|
一键添加小程序所有文件jswxmlwxssjson升级到新版后可以“一键”新建小程序4个常用文件，不用一个一个的去建，方便多了！|
常用快捷键总结 (mac系统/win系统)1: opt + shift + f : 代码格式化2: cmd + [, cmd+ ]代码行缩进。。。|
让他人体验自己的小程序
怎么让别人体验自己的小程序啊，我认为这个将是很多朋友即将遇到的问题|
官方社区使用指南
为了让大家解决问题更有效率，官方社区是必不可缺的。|
如何让微信小程序更容易审核通过
微信小程序审核不通过，有很多原因，其中最明显的一点就是：服务类目问题；|
审核提供测试账号
自有账号体系 提交审核怎么提供测试账号|
关于如何将大神demo应用于自己项目
把大神们造轮子的逻辑应用于我们项目的相应组件上，这就是基本思路，有思路才能优雅 |
使用本地服务器进行调试
怎么请求本地网络啊 IP形式的网络？怎么访问本地架设的服务器？|
开发者工具无法登录账号
最近开始频发无法登录账号的问题，诸如request https
登录态失效等 |
小程序敏感词汇过滤问题
用户需要发表内容的小程序，需要设定关键词过滤，屏蔽掉政策不允许的内容：|
公众号关联微信小程序简单方法
很多人可能会问，公众号如何添加微信小程序呢？步骤很简单： 1： |
无法长按识别及无法分享到朋友圈的替代方法
看到 同学发了一个花样二维码，我看了之后，顿时来了一个灵感。。。 |
使用PHP/thinkphp后端问题
后端部分跟小程序的前端部分是分离的 |
使用java后端问题说明
请求数据方面没有区别，只需要提供json格式的数据接口即可；但是因为小程序方面对其他|
使用nodeJS作为小程序后端node用的人很多啊。。稍微聚集一下相关的知识|
使用C#解密用户信息
由于官方没有提供C#的解密demo，所以大家只能八仙过海各显神通了。。。 |
使用第三方SDK及服务及扩展库及框架
目前已经为小程序开发了SDK及可以辅助开发的库或框架或SDK|
使用第三方库（第三方js）
小程序怎样引用第三方js呢？第三方js是封装好的类库 想引用进来实例化使用|
使用第三方编辑器（IDE开发小程序，并非一定要使用官方的编辑器，你也可以任意选择自己喜欢的编辑器；|
模块化、组件化及封装
开发过程中要学会不断的重构代码，尽量提高代码的可重用性，尽量不要复制相同的代码。|
参数传递，跨页面传值或通讯相关知识
这个东西，是开发小程序必备神器，越深入了解，越可以有效的帮助自己| 图表类：折线图，柱状图，K线，分时图
各类图表功能，小程序自带API并没有提供，所以很多人就用了其他方法来实现。|
模版template使用，import及include
template是小程序中的一个重要应用；WXML 提供两种文件引用方式import和include。 |
富文本解析：将html转为为wxml富文本解析是一个困扰无数人的问题，目前网上的解决方案已经比较多了 |
自定义字体/自定义图标相关
自定义图标及自定义字体，一直是很多小程序开发者的心病|
微信小程序真机预览跟本地不同的问题
本地可以看到数据，打开调试也可以看到数据，关闭调试则看不到数据；或是开发版可以看|
常见错误及基本排除方法
也接触了不少人解决问题的过程里，有一些比较难以排查的可能性列举在这 |
ios苹果真机相关问题
此问题只在ios上出现，而安卓没有问题；或是这个问题同时在安卓和ios上出现；|
Android安卓真机相关问题
本帖特别针对以下两个情况：情况一：此问题只在安卓上出现，而ios没有问题；|
Javascript 标准库兼容性及ES6支持度说明iOS、Android 和 开发者工具。三端的脚本执行及用于渲染非原生组件的环境是各不相同的|
ssl证书相关问题errMsg: "request: fail ssl hand shake error"等错误及免费证书申请地址|
小程序1024K限制及代码压缩相关
为了提升小程序体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传|
微信小程序支付（微信支付签名错误
发起支付时的签名需要有appId(不是appid,大小写)|
微信支付（微信小程序支付）
小程序仅支持微信支付；而微信支付需要认证后才可以使用，需要花费300元认证费用；|
微信登录问题
有个登录功能，为什么小程序在别的手机上无法登录？|
Session、session_key及checkSession
checkSession 就是用来检测 session_key 是否过期|
用户未授权获取登录信息的替代方法
用户如果拒绝授权，需要10分钟等待后才可以再次申请授权；|
授权获取用户信息的弹窗
授权获取用户信息窗口在开发工具可以多次提示，在手机上测试的时候只弹出一次，这是正|
openid与unionid微信登录必备|
解密获取unionid问题unionid，需要 先在微信开放平台内绑定小程序；，方可解密出unioni|
带参数二维码，返回数据保存为图片php，java，node，C#等保存为图片的方法|
带参数二维码相关知识
生成的数量有限制，总共只有10万个；另外，扫码访问次数没有限制。|
MD5加密使用说明
聚集一下md5加密在小程序中的使用相关的内容： |
页面路径五层限制
官方规定页面路径只能是五层，请尽量避免多层级的交互方式。|
并发数及连接数限制及promise/async/await
request 的最大并发数是 5；upload/download最大并发限制是 5 个|
wx.downloadFile问题downloadFile，需要在小程序公众后台配置相应的downloadFile域名，否则会无法正常使用| wx.uploadFile（上传文件）相关问题
特别提示一：upload必须在小程序公众后台配置上传域名，才可以在真机使用。|
图片上传问题
域名检测全部是正确的，并且后台也配置了域名，但是安卓就是无法上传图片：|
wx.openDocument打开文件
新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx|
wx.saveFile文件保存API文件保存API是很多人懵逼的。。。|
模板消息相关问题说明
当用户在小程序内完成过支付行为，可允许开发者向用户在7天内推送有限条数的模板消息|
客服消息相关（客服按钮修改
客服按钮能自己定义吗？可以的|
swiper轮播图组件1：如何上下滚动；2：如何点击；3：如何自定义指示点|
button按钮组件使用button用来配合form或者单独点击|
分享相关 知识onShareAppMessage只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮|
image图片组件使用background-image：可以使用网络图片，或者 base64，或者使用标签|
模态弹窗wx.showModal及遮罩层
带有输入框的弹窗|
微信小程序缓存API相关知识
关于数据缓存，怎么能获取到本地缓存使用了多少，还剩多少|
map组件，地图使用相关问题
包括百度地图，腾讯地图，高德地图api及各种地图相关demo|
WebSocket相关问题说明
请保证wss域名符合https的要求；比如备案，不得带有端口等；|
canvas相关问题说明canvas、textarea、video层级最高的变通方法|
音频相关问题：播放，录音等相关
包括语音识别类demo及教程|
录音文件格式为silk（silk转mp3）
暂不支持模拟录音，手机上录音目前是silk格式。如何转为mp3困住了不少人| 语音搜索及语音识别相关
这属于小程序框架体系之外的功能，可以将语言传给第三方服务器进行识别|
progress进度条及slider凑合看吧，比如自定义圆形进度条。。。|
radio单选（单项选择器
文章及demo可能并非是radio的使用说明，而是实现了自定义了单选等；|
switch开关选择器使用
自定义switch方法说明|
组件系列：scroll-view实现滑动及锚点功能|
组件系列：textarea
textarea可能出现的问题五花八门，请做好心理准备|
坑点较多。。。|
重力感应及罗盘API开始搞摇一摇了。。。|
计时器/倒计时相关
倒计时，计时器等组件使用说明|
视频播放相关（video组件）video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。|
text组件，文本换行及空格
总结一下text组件，以及文本换行，文本溢出及空格，复制问题；|
animation动画相关问题
本帖主要是针对animation的使用相关的教程及问题说明|
toast吐司组件问题说明（自定义toast）
包括自定义toast等问题说明|
picker及picker-view组
用途广泛的联动选择器，目前已经比较实用了；|
tabbar相关问题说明
包括tabbar不显示，自定义tabbar等问题的说明|
3.1K177 条评论分享收藏感谢收起/qcloud/la/demo-source/qcloud-applet-album.zip下载，也可以从腾讯云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。git clone 最终，我们会得到类似这样的文件目录。简单解释下目录结构：applet（或app）: 「小相册」应用包代码，可直接在微信开发者工具中作为项目打开。server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接口示例，用于拉取图片资源、上传图片、删除图片。assets：「小相册」的演示截图。源码下载完成之后，我们打开微信 web 开发者工具，新建项目「小相册」，选择目录applet（或app）。「小相册」源码分析在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必备文件。config.js 文件中包含了一些部署域名的设置，现在不用管。在 pages 目录下，有两个 page 页面，分别是 index 和 album。页面结构算是比较简单的，其中 index 是小程序启动时默认进入的页面。每个页面下，至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。接下来我们以 index 页面为例做简单的解释。index.wxml 是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。&view&
&view class="page-top"&
&text class="username"&恭喜你&/text&
&text class="text-info"&成功地搭建了一个微信小程序&/text&
&view class="page-btn-wrap"&
&button class="page-btn" bindtap="gotoAlbum"&进入相册&/button&
&view class="page-bottom"&
&text class="qr-txt"&分享二维码邀请好友结伴一起写小程序！&/text&
&image src="../../images/qr.png" class="qr-img"&&/image&
&image src="../../images/logo.png" class="page-logo"&&/image&
页面的演示效果如下： (二维码自动识别)我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做gotoAlbum 的方法。而这个方法可以在 index.js 文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。Page({
// 前往相册页
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
album.js 页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的实现请查看。所有的这些功能都写在 Page 类中。lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。第三步：云端部署 server 代码虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以。可谓是一键部署好云端。如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者以优惠的价格购买所需的服务。你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。第四步：准备域名和配置证书如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名。如果没有域名，。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。第五步：Nginx 配置 https微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。请将红框部分换成自己的域名和证书，并且将 proxy_pass 设置为 Node.js 监听的端口，我的是 9993。配置完成后，重新加载配置文件并且重启 Nginx。sudo service nginx reload
sudo service nginx restart
第六步：域名解析我们还需要添加域名记录，将域名解析到我们的云服务器上，这样才可以使用域名进行 https 服务。在腾讯云注册的域名，可以直接使用来添加主机记录，直接选择上面购买的 CVM。解析生效后，我们的域名就支持 https 访问了。第七步：开通和配置 COS由于我们希望实现动静分离的架构，所以选择把「小相册」的图片资源是存储在 COS 上的。要使用 COS 服务，需要登录 ，然后在其中完成以下操作。点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。 弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。第八步：启动「小相册」的服务端在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。cd /data/release/qcloud-applet-album
在该目录下，有一个名为 config.js 的配置文件（如下所示），按注释修改对应的 COS 配置：module.exports = {
// Node 监听的端口号
port: '9993',
ROUTE_BASE_PATH: '/applet',
cosAppId: '填写开通 COS 时分配的 APP ID',
cosSecretId: '填写密钥 SecretID',
cosSecretKey: '填写密钥 SecretKey',
cosFileBucket: '填写创建的公有读私有写的bucket名称',
另外，cd ./routes/album/handlers，修改 list.js，将 const listPath 的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为 '/'。当前服务端的代码中将该值设置为了 '/photos' ，如果你在第七步中没有创建该目录，则无法调试成功。小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：pm2 start process.json
第九步：配置「小相册」通信域名接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。将蓝色框内的内容修改为自己的域名然后点击调试，即可打开小相册Demo开始体验。最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。嗯，就这点不够爽，没有内测邀请。我的同事还写了另外3个demo的「」，大家也可以看看。 (二维码自动识别)1.3K149 条评论分享收藏感谢收起查看更多回答3 个回答被折叠（）