主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
你只管努力，剩下的交给时光！
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：
微信小程序 input输入框控件详解及实例（多种示例）只需一步，快速开始
后使用快捷导航没有帐号？
关注：1454
所属分类： & &
本版块为微信小程序资源分享版块，包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。
快捷导航（）：、、
微信小程序demo源码、开发工具和插件资源下载
微信小程序开发教程，小程序开发技巧探讨、踩坑过程分享、案例解析教程
1879 / 2170
3789/51860
2181/63376
发现新世界小程序最新问答
小程序一周最热
<是专业的第三方微信开发者平台，为生态而生。
本站为第三方微信开发者平台，非腾讯官方网站。
天津市滨海新区中新生态城中成大道生态建设公寓9号楼3层301
欢迎来这里一起喝喝茶，聊聊你的产品。
微信公众号gongzhongkaifa
工作日12小时内回复。
工作日12小时内回复。[教程]玩转微信小程序（二）小程序开发实操指南 - 简书
[教程]玩转微信小程序（二）小程序开发实操指南
第三章：微信小程序项目结构以及配置
找到创建的 demo 文件夹，把项目导入到你的编辑器，这里使用的是Sublime Text编辑器。
这个时候需要根据自己的项目需求结构进行更改了，项目根目录下面是首页渲染的几个 tabBar 页面，以及 app 的一些配置文件，如名片盒项目的 tabBar 是 3 个切换菜单
我们先找到 app.json 文件打开配置好这几个菜单，配置好 tabBar，这个直接把配置文件改成你自己设计的即可。
App.json 里面有几个配置项：
Pages：这个是编写的js文件，后缀.js这里不需要使用，配置好正确路径即可正常调用（若调用不到，在重启微信开发者工具会直接报 page 错误）。
Window：配置顶部的一些样式，文档介绍比较详细。 tabBar：底部的几项配置，见名知意。 networkTimeout：暂时没发现用处，建议看文档。根据实际项目需求进行添加与更改。
iconPath和selectedIconPath：底部菜单按钮图片与得到切换点击高亮。* text：可以去掉，全部去掉会发现底部 tabar 高度会减少很多。
Json 文件配置好后，根据项目进行文件创建。Demo：存放的是假数据，这一期的开发工具支持 require，假数据使用的是 .js 文件形式，里面的数据结构 json 一致，把 data 暴露出去即可
然后取数据 require 进来即可，这一点使用很方便；Images：图片路径；Page：除 tabar 以外的页面；Servise：服务交付层（与后台联调真实数据时使用）； Wxss：一些公共的 css 文件；看到这里大家发现每个页面都被连带好三个不同的后缀。分别页面，css，js 目前只能依照这样，是微信应用号的一个规范吧。
Wxss 文件是引入你写的样式文件，也可以直接在里面写样式。
Js 文件需全部配置到 pages 里面才能生效。
下一章：微信小程序首页面开发。
第四章 微信小程序首页面开发
进行了各种准备与配置后，来到首页开发。首先需要实现首页效果图如下：
Template 名片很多，需要用模板、 这里需要微信提供的基础组件大致是 input（搜索框）、action-sheet（右边是个底部下拉菜单，需要下拉菜单）、 Scroll-view (右边 ABC 跳转)、（这个目前实现还有点问题，正在攻克中）。
View是块元素，整个搜索框的一个样式。
名片夹：由于该项目主打名片功能，故很多地方使用，所以需要把名片以 template 分离出来。 Template：定义一个模板，name 模板的名字其实是个作用域。
Block：循环控制，名片很多，必须用循环出来，和很多操作数据的前端框架循环差不多。 支持自定义属性 data，这里用作判断线上名片以及线下名片。
View 里面是一些数据引入，里面是支持三目运算符。
引入 template 时非常方便，is 和 name 一样，data 是 nameData 传递过来的数据填充。
一切都绑定数据为中心点。
取到数据具体操作根据你数据结构：
这里的数据结构和 json 数据结构一样，
这里如要传到页面的话即是
this.setData({nameData:card_list_name.data.cards,timeData:card_list_time.data.cards});
因为页面遍历的是 nameData,timeData
可以看下打印出来的数据结构，根据你的结构进行解析与传递。
也可以看下这里对数据的一些操作。（这里须根据定义的 json 数据格式来操作的）
名片的样式由于很多页面需要使用放在 common.css 里面，这个 common.css 是所有页面都需要用到，一些初始化设置。它是在 app.wxss 里面引用之后才能被映射到全局 APP。
搜索框：其中 bindChange 为输入框发生改变事件。微信提供的 bindchange 在支持方面还有小问题，目前是失去焦点才能触发到此事件的发生，待后续完善吧，先实现功能再说。
在 index.js 里面写事件
bindInputChange:function(e){ //发生搜索事情var self = //this绑定，这个this指向微信的提供window var Text = e.detail.value.toUpperCase(); //取到输入的内容if(Text==""){ //如果输入为空 一些东西需要显示 否则不显示show_letter = "block"; }else{show_letter = "none";}this.setData({show_letter:show_letter, showSheet:true});var res = nameD 获取到传递的数据if(data_type=="name"){}else if(data_type=="time"){res = timeD };for(var k in res){ //for-in循环取到data里面的cardsvar data = res[k]. for(var i = 0;iIf(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){ data[i]["display"] = "block"; //存在就是赋值显示}else{data[i]["display"] = "none"; // 不存在赋值不显示}}}}
菜单栏：做到菜单栏，使用微信提供的下拉菜单组件 action-sheet，它被触发的条件在这里。
一切以绑定事件为起点：
还是得先布好局才能被调动
Data 初始化数据：
这里得取非，直接设置 false 调不出来: 调用事件。
调出来还得去掉它啊：如下相同即可
取消直接上事件即可。（分为菜单栏外部与底部）
//好了，就是这么简单。实现效果简单，体验效果确实非常不错。
还需要个 loading 效果（暂时没做动画，后期再考虑。）Loading 布局
首页的最外层 view
根据微信的生命周期
```Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})}, onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}
加载条完成。
扫一扫，直接调用拍照功能，从这里看到微信提供的拍照 api 使用起来非常快速，只需根据需求配置即可。
点击扫一扫之后，在开发者工具即可看到如下效果。
做到这里说明下，dom 长度有限制，页面的结构太长，也是无法渲染的，暂且把公司排序暂时先去掉了。
左边的 ABC 跳转（还在继续完善中）。这里还有个左滑删除名片功能，微信没有提供这个在移动端很实用的功能真的比较遗憾，后面得花点时间自己写下（后续完善）。
好了，今天更新的内容就先到这里。将与您共同成长。微信号： QQ群：如何入门微信小程序开发，有哪些学习资料？ - 知乎13541被浏览781618分享邀请回答mp./debug/wxadoc/dev/?t=93：设计指南：4：设计资源下载：资源下载5：微信小程序公测接入指南：6：微信小程序支付文档：7：新手入门宝典：8：免费视频：9：实战宝典：10：从注册到上线系列：11：精品合集：导航系列：1-6月7月8月9月特别说明：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月9日：10月13日：10月14日小程序资讯集合 10月14日小程序Demo集合 10月10日小程序资讯集合 10月10日小程序Demo集合9月22日小程序资讯集合 9月22小程序Demo集合 9月15日小程序资讯集合 9月15日小程序Demo集合9月8日小程序资讯集合 9月8日小程序Demo集合 9月1日小程序资讯集合 9月1日小程序Demo集合8月18日小程序Demo集合8月11日小程序资讯集合 8月11日小程序Demo集合8月4日小程序Demo集合7月28日小程序Demo集合7月21日小程序Demo集合7月14日小程序Demo集合 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.3K187 条评论分享收藏感谢收起/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.4K149 条评论分享收藏感谢收起查看更多回答3 个回答被折叠（）}