「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。
因此也就有了我与「小程序」的初体验，而我的感受只有一个字&&爽！
在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的。
「小相册」主要实现了以下功能：
列出对象存储 COS 中的图片列表。
点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 对象存储 COS 中。
轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片。
长按任意图片，可将其保存到本地，或从 对象存储 COS 中删除。
效果演示图（受开发工具的限制，部分功能尚未实现）
（Cloud Object Service）是腾讯云推出的面向企业和个人开发者提供的高可用，高稳定，强安全的云端存储服务。可以将任意数量和形式的非结构化数据放入COS，并在其中实现数据的管理和处理。
之所以选择腾讯云的 Demo，一是因为它是腾讯自家推出的，项目的质量有保障；二是因为它是少有的既讲小程序开发，又介绍云端部署的项目。
稍微有点经验的程序员都知道，架构要动静分离，静态文件最好不要放在自己的服务器上，要放在专门用来存储的对象存储服务器COS上，并且用CDN 加速。「小相册」后端采用的是 Node.js，Nginx作为反向代理。
首先，我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE，大家没有必要再去下载破解版了。打开，根据自己的操作系统选择。我使用的是 Mac 版。
安装好之后打开运行，会要求微信扫码登陆。之后，就可以看到创建项目的页面了。
选择添加项目，没有 AppID 就选无（如果乱写会报错，到时可能无法进入项目）。如果你选择的项目目录为空，请如图所示勾选在&当前目录中创建quick start项目&。
点击&添加项目&之后，我们会进入开发工具的调试页面。
接下来，我们下载「小相册」的源码。可以选择直接从下载，也可以从腾讯云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。
git clone https://github.com/CFETeam/weapp-demo-album.git
最终，我们会得到类似这样的文件目录。
简单解释下目录结构：
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&是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
页面的演示效果如下：
我们看到，页面上有一个&进入相册&的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？
在&index.wxml&中，我们发现对应的 button 标签上定义了一个&bindtap&属性，绑定了一个叫做&gotoAlbum&的方法。而这个方法可以在&index.js&文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。
album.js&页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的实现请查看。所有的这些功能都写在 Page 类中。
lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。
总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以。可谓是一键部署好云端。
如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者以优惠的价格购买所需的服务。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。
在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 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 服务，需要登录&，然后在其中完成以下操作。
点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。
然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击&获取API密钥&。
弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。
微信小程序应用号交流群 。
最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。
在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录&/data/release/qcloud-applet-album&下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。
cd /data/release/qcloud-applet-album
在该目录下，有一个名为&config.js&的配置文件（如下所示），按注释修改对应的 COS 配置：
module.exports = {
另外，cd ./routes/album/handlers，修改&list.js，将&const listPath&的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为&'/'。当前服务端的代码中将该值设置为了&'/photos'&，如果你在第七步中没有创建该目录，则无法调试成功。
小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：
pm2&start&process.json
接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。
将蓝色框内的内容修改为自己的域名
然后点击调试，即可打开小相册Demo开始体验。
最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。
嗯，就这点不够爽，没有内测邀请。
微信小程序应用号交流群
作者：EarlGrey
阅读(...) 评论()使用微信小程序开发前端【快速入门】
转载 &发布时间：日 09:23:32 & 作者：劳卜
本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响，希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。
日凌晨，微信官方通过“微信公开课”公众号发布了关于微信小程序（微信应用号）的内测通知。整个朋友圈瞬间便像炸开了锅似的，各种揣测、介绍性文章在一夜里诞生。而真正收到内测邀请的公众号据说只有200个。
虽然内测名额十分稀少，但依赖中国广大开发者的破解和分享精神，在网络上很快出现了开发工具的破解版本和API文档。然而可能是微信的妥协或者早已预料，9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档，对于费劲心思破解完的开发者来说应该瞬间整个人都不好了。
以下便是微信提供的开发工具和文档地址：
作为一名具有极客精神的前端开发者，我也马上在这股热潮中试了下水，下载了小程序开发工具。下面是登陆后的界面：
从整个结构布局来看这款IDE工具可以分为三个部分，首先左侧为导航操作区域，中间是目录或展示区域，右侧为调试区域（很像Chrome的调试工具）。下面我就以前端的角度分别从代码角度和宏观角度介绍下自己对于微信小程序的看法。
纵观整个开发文档，微信小程序的前端技术主要可以分为“框架”、“组件”和“API接口”。
微信提供了一套自己的用于开发小程序的前端框架，和目前主流的前端框架相比，其既有类似的地方，也有特殊的地方。
特殊的地方在于其只能在微信小程序开发工具内使用，并做了相对严格的使用和配置限制，开发者必须按照其规定的用法来使用。一些外部的框架和插件在小程序里都是无法使用的，同时由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如document，window等。
而相似的地方在于其包含了和其他框架一样的“逻辑层”和“视图层”，以数据驱动为主，不操作DOM元素等。下面以代码为例子来介绍：
（1）数据绑定
&!--wxml--&
&view& {{message}} &/view&
// page.js
message: 'Hello MINA!'
Page() 方法用来注册一个页面。接受一个 OBJECT 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。这乍一看怎么和目前流行的Vue框架语法十分类似呢，Vue代码如下：
&view& {{message}} &/view&
// page.js
message: 'Hello MINA!'
都是双括号插值语法，连数据初始化和双向绑定的格式都一样，好吧，就当纯属巧合吧。
这里需要注意的是，微信小程序提供了WXML后缀的文件类型，其实就是类似XML的标签语言文件。
（2）列表渲染
&!--wxml--&
&view wx:for="{{array}}"& {{item}} &/view&
// page.js
array: [1, 2, 3, 4, 5]
这样的列表渲染语法相信学过Angular和Vue的同学都比较容易掌握，都是非常的类似，当然还有条件渲染等。
（3）事件绑定
&view bindtap="add"& {{count}} &/view&
add: function(e) {
this.setData({
data: this.data.count + 1
如果你学过React，那么其里面有一个setState的方法可以用来改变状态的值，这里的setDate也是一样的，通过绑定的add方法来改变视图中count的值。
（4）样式导入
/** common.wxss **/
.small-p {
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15
这里小程序提供了又一种新的文件后缀类型WXSS，用于描述WXML的组件样式，其与CSS文件相比还提供了像SASS和LESS这样的预编译语言的样式导入功能，同时还提供了rpx及rem的单位尺寸功能。
（5）模块化
// common.js
function sayHello(name) {
console.log('Hello ' + name + '!')
module.exports = {
sayHello: sayHello
var common = require('common.js')
helloMINA: function() {
common.sayHello('MINA')
微信小程序秉承了JS模块化的机制，熟悉Require.js或者Sea.js的同学应该很熟悉，这里通过module.exports暴露对象，通过require来获取对象。
小程序的组件其实也是框架的一部分，主要负责UI的呈现，也自带了一些功能与微信风格的样式。基本上移动端常用的组件都包含在内，比如表单组件、导航组件、媒体组件等。下面便是小程序提供的八类组件：
对于小程序的组件使用其实不是非常复杂，按照文档的使用示例便可以轻松搞定，详细地址：
相比微信公众号的开发，微信小程序向开发者提供了更多的API接口，可以方便的调起微信提供的能力，比如监听重力感应和罗盘数据、WebSocket连接、支付功能等。下面以一个发起网络请求的API为例：
wx.request({
url: 'test.php',
name: 'luozh' ,
'Content-Type': 'application/json'
success: function(res) {
console.log("请求成功")
fail: function() {
console.log("请求失败")
wx.request发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。关于更多API接口的介绍请查阅官方文档。
以上便是关于微信小程序前端代码部分的简单介绍，相信有一点前端框架使用经验的同学上手都是相对容易的，下面将从宏观角度讲解下我个人认为微信小程序给前端领域的带来影响。
微信小程序一出来的时候，网上关于其对于前端界的影响层出不穷，更多的文章和评论认为前端又要火了，前端的第二春来了，Javascript和HTML5的新时代来了等。
当然微信小程序的出现确实会给前端带来一定的推波助澜的效果，但是任何一件事物的诞生都是利弊并存的，微信小程序也不例外。以下便简单阐述下我个人的看法：
（1）提高开发兼容性：微信小程序可以说是重新定义了APP，使得一款应用能够在android、iphone及windows phone中都能运行，对于前端来说实现了“一次编译，到处运行”的理念。
（2）推动前端技术的发展：微信小程序以其简单的开发环境，使以Javascript和HTML5为主的前端技术在庞大的微信社交群体内传播，越来越多的人开始接触前端，参与到前端编码和设计中来，为前端技术贡献力量。
（3）其他...
（1）增加前端工作量及学习成本：原本一名前端工程师负责的平台就很广泛，包括PC端、移动端、APP应用等，微信小程序的出现会要求前端涉及微信应用的开发，一定程度增加了学习和工作成本。同时企业也会增加这方面的开发和投入成本。
（2）前端竞争日趋明显：微信小程序的诞生可能又会吸引一批后台、APP开发等其他领域的人员转向前端开发，而这些本来就具备较强逻辑思维或者较强感性思维的人将挤掉那些处于前端边缘的新手，可能使得大部分低水平前端开发者面临失业或者找不到工作的危险。
（3）其他...
这里大概介绍了几点微信小程序给前端带来的影响，更多的大家可以补充。
本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响，希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。
至于小程序对于前端的影响，反过来我们也可以这样认为：
技术的发展不是基于一个平台去改变，而是通过技术去驱动一个平台改变，正是因为前端的发展才催生了“小程序”的这种可能性…
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具没有更多推荐了，
不良信息举报
举报内容：
微信小程序用好这两招，就能快速低成本获取新用户
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！星巴克用星说小程序二维码|星巴克用星说微信小程序入口_星巴克小程序_腾牛小程序商店
专业的QQ下载站 本站非腾讯QQ官方网站
当前位置： →
→ 星巴克用星说微信小程序入口
星巴克用星说小程序截图
星巴克用星说小程序简介
星巴克用星说小程序，在此不仅可以查看最新的饮品，还能DIY礼品。它当然是由于星巴克打造的，和以前的“用星说”程序一模一样，只是入口不同而已。小程序官方内容：星巴克用星说小程序，提供全新社交礼品体验。选份星巴克好礼，用心定制专属的咖啡心意，即刻想在乎的人传递祝福，连接彼此。小程序使用感受：实际上现在出现在我们面前的小程序也几乎和之前一模一样，界面、操作、体验感受如出一辙，如果你之前已经用过“用星说”给朋友们买过咖啡或者星礼卡，那“用星说”的小程序只是入口不同而已。虽然星巴克方面还是把两边分开来描述，一边是“星巴克中国官方微信公众号中的‘用星说’板块”，一边是“‘星巴克用星说’微信小程序”――星巴克将它们统称为“用星说”平台――不过其实还是同一个东西，你可以在“购买历史”下看到两边的购买记录。不过这当然并不是重点，重点是星巴克又带来了一个你可以选择的方式，让你换着不同的姿势都可以进入到“用星说”的界面下。总之现在我们如果在微信的搜索框中搜索，在“小程序”的结果下就能看到“星巴克用星说”，你也可以把它在微信界面下置顶方便随时使用。而剩下的就是我们已经习惯的赠送方式。星巴克可以以这样的方式不断换新卡片设计、祝语，或者在不同的节点带来不同的活动，方便用户以最简单、最不需要决策层本的方式传情达意。