现有的基于微信平台的电商公众号大多采用内容+店铺的方式发布商品，店铺大多是接入有赞、微店等平台提供的服务，像逻辑思维公众号，山茶花公众号。
通过有情怀和有温度的文字达到与用户的情感共鸣，并引导用户消费是这类公众号在商业模式上的闭环。为了提高用户在浏览商品时的体验，提高产品的质感，我参照「iDaily」 app的UI设计开发了这个微信小程序-好物杂志。
它很简单，「每日推荐」是同步公众号每天发布的商品，图片要足够优质，文字要足够精华。「往期好物」以timeline的形式展示过去每天的产品列表，不多，每天的商品不会多于六种。用最简单的设计带来良好的用户体验。
下面介绍我的开发过程，主要是小程序内置组件、数据绑定和相关API的使用。
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
小程序框架
小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，每个页面开发包括三个部分：页面布局wxml，样式wxss和处理逻辑js。
数据绑定
小程序使用Mustache愈发{{data}}的方式绑定视图层（View）和（App Service）数据，当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
<pre>
<view class="title-text">
<text>{{title1}}</text>
</view>
</pre>
首页的完整Demo如下
第一步 实现底部标签tabBar
小程序的底部tab栏在app.json文件配置
<pre>
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#e04ef3",
"borderStyle":"white",
"list": [
{
"selectedIconPath": "img/Category.png",
"iconPath": "img/Category.png",
"pagePath": "pages/history/history",
"text": "往期好物"
},
{
"selectedIconPath": "img/favorite.png",
"iconPath": "img/favorite.png",
"pagePath": "pages/index/index",
"text": "今日推荐"
}...
]
}
</pre>
第二步 实现轮播图
「今日推荐」页面嵌套了两个<swiper>组件，swiper1用于多个商品切换，swiper2用于单个商品图片自动轮播。实现代码如下：
<pre>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" class="swiper">
<block wx:for="{{banners1}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<view class="title-text">
<text>{{title1}}</text>
</view>
<view class="detail-text">
{{detail1}}
</view>
</view>
</swiper-item>
</pre>
在js中设置<swiper>相关参数实现自动轮播
<pre>
indicatorDots:true,
autoplay:true,//开始自动切换
interval:6000,
duration:1000,
</pre>
由于微信严格限制小程序编译包大小，不能将大图片放到项目目录中，我们将大图片上传到了服务器，在js中绑定data，
<pre>
data:{
banners1:[
'http://...246/xcx2/img/xl.jpg',
'http://...246/xcx2/img/xl1.jpg',
'http://..***.246/xcx2/img/xl2.jpg',
]
}
</pre>
然后使用
<pre>
wx:for
</pre>
方法将{{banners}}数组中的每一项渲染到swiper-item中。
第三步 Timeline图片展示
「往期好物」页面以Timeline显示每天的商品列表，这个页面使用了Flex布局，效果如图。
<pre>
.history_img{
flex-direction: row;
width:80px;
height:60px;
margin-left:12px;
margin-top: 5px;
}
</pre>
第四步 购物车
购物车实现参考文章【微信小程序 购物车简单实例】，这篇文章作者把实现购物车Demo的过程写的很详细，感谢~
第五步 分享
微信提供了分享某个页面的API，使用方法很简单。在需要提高分享功能的页面定义 onShareAppMessage 函数，设置该页面的分享信息。
<pre>
Page({
onShareAppMessage:
function () { return {
title: '自定义分享标题',
desc: '自定义分享描述',
path: '/page/user?id=123' }
}
})
</pre>
总结
从12月14号开始着手学习微信小程序的相关知识，从申请账号到学习相关组件和API，感觉对于开发者来说，小程序开发上手是比较简单的，微信团队也在不断的更新API和丰富小程序的应用场景。从web时代到移动互联网时代的app再到公众号、小程序，我认为虽然产品的形态会一直改变，但不会改变的是真实的用户诉求，小程序更考验产品经理关注用户使用场景，准确定位用户需求的能力。
本文简单介绍了小程序内置组件、数据绑定和发送请求API的用法，接下来我会完善程序的后台，在服务器端动态获取数据。并探索更适合小程序的使用场景，争取做出好玩有趣的应用。
