微信小程序的应用场景

开发流程

在开发前，首先要有原型图和UI视觉图。

原型图通常是由产品经理使用Axure 绘制，原型图会用简单的图形和文字展示页面功能，比如页面元素的布局和交互逻辑。

UI视觉图就是基于原型图的页面布局出的最终视觉效果图。

当然，若页面不复杂，原型图和UI 视觉图也可能都画在一起。

我们开发者要做的，就是基于UI的视觉效果和原型图的交互逻辑开发小程序。

我们可以按照以下三步走：

WXML+WXSS还原设计稿。按照页面交互，梳理出每个页面的data部分，填充WXML的模板语法。完成JS逻辑部分。

注意：高效的开发流程有很多种方式，具体还得看团队的工作节奏，我们刚才说的只是最常规的。

比如，若产品交互体验还不明确，我们可以先完成一些局部功能，比如与后端数据的对接，并且做好测试。

flex 布局

微信小程序里的flex 布局和网页开发中的flex 布局是一样的。

flex 布局可以实现一些灵活的比较高的效果，比如：信息列表中，要求文字在内容高度不确定下保持垂直居中。

flex 的概念

container：容器，采用flex布局的元素

item：项目，容器内的元素

容器的属性

display：flex;flex-direction 主轴的方向 ： row（默认值） | row-reverse | column |column-reverseflex-wrap 换行方式： nowrap（默认值） | wrap | wrap-reversejustify-content 主轴上的对齐方式 ： flex-start（默认值） | flex-end | center |space-between | space-around | space-evenlyalign-items 交叉轴上的对齐方式 ： stretch（默认值） | center | flex-end | baseline | flex-startalign-content 多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间：stretch（默认值） | flex-- start | center |flex-end | space-between | space-around | space-evenly

项目的属性

order 项目的排列顺序 ：0（默认值） | flex-shrink 项目的缩小比例 ：1（默认值） | flex-grow 项目的放大比例 ：0（默认值） | flex-basis 项目的缩放基准：auto（默认值） | flex 简写flex-grow+flex-shrink+flex-basis：none | auto | @flex-grow @flex-shrink @flex-basisalign-self 单个项目的对齐方式 ：auto（默认值） | flex-start | flex-end |center | baseline| stretch

界面常见的交互反馈

用户在小程序上进行交互的时候，某些操作可能比较耗时，需要我们予以及时的反馈，去舒缓用户等待的不良情绪，这样的反馈就是交互反馈。

常见的交互反馈有：

触摸反馈Toast和模态对话框界面滚动

触摸反馈

通常页面会摆放一些button按钮或者view区域，用户触摸按钮之后会给按钮换个颜色。如果此按钮是加载数据的，要显示一个loading的状态。

用户触摸后的样式设置可用通过组件的hover-class属性实现，如：

.hover{background-color: #00acec;}<button hover-class="hover"> hover</button>

按钮loading 状态的显示，可以通过 组件的loading 属性实现：

<button loading="{{loading}}" bindtap="tap">hover</button>Page({data: {loading: false },tap: function() {// 把按钮的loading状态显示出来this.setData({loading: true})// 接着做耗时的操作}})

Toast提示

在某个操作成功之后，我们希望提示用户这次操作成功，并且不打断用户接下来的操作。这就需要使用弹出式提示Toast，Toast提示默认1.5秒后自动消失。更多

// 显示Toastwx.showToast({title: '已发送',icon: 'success',duration: 1500})// 隐藏Toastwx.hideToast()

模态框

在做错误提示的时候，Toast 是不合适的，因为错误提示需要明确告知用户具体原因，因此不适合一闪而过的Toast。

错误提示需要使用模态框，模态框可以让用户明确知晓自己的操作结果，同时附带下一步操作的指引。更多

wx.showModal({title: '标题',content: '告知当前状态，信息和解决方法',confirmText: '主操作',cancelText: '次要操作',success: function(res) {if (res.confirm) {console.log('用户点击主操作')} else if (res.cancel) {console.log('用户点击次要操作')}}})

界面滚动

往往手机屏幕是承载不了所有信息的，所以就有里界面滚动。

常见的界面滚动有：下拉刷新、上拉加载。

下拉刷新：用户下拉整个界面时，可以刷新当前页面。

上拉加载：用户上拉整个界面，触底时，加载更多信息。这种交互操作叫为上拉触底。

注：scroll-view 滚动视图组件，提供了提供了丰富的滚动 回调触发事件，可以实现界面中某一区域的滚动。

HTTPS 网络通信

wx.request() 的作用：往服务器传递数据，从服务器拉取信息。request() 有两种方法把数据传递到服务器： get请求：通过url传递参数，如 url:‘/getinfo?id=1&version=1.0.0’post 请求：通过data传递参数，如：data: { id:1, version:'1.0.0’ }, 建议使用data 传递数据，因为url 的最大长度是1024字节，url上的参数需要拼接到字符串里，参数的值还要urlEncode。开发中的小程序的request 请求可以任意写，而正式版的小程序则必须遵循以下条件： 遵循https协议。在

了。

示例：

1.使用id 请求新闻内容

url：http://localhost:9000/getNews?id=1method：’GET’

2.使用id 请求用户名

url：http://localhost:9000/getUserNamemethod：'POST’data:{id:2}

微信登陆

常见的登录的问题：

怎么获取用户在微信的信息怎么获取小程序用户的唯一身份标准

比如，李伟进入一个电商小程序的时候，做个判断：

如果李伟是新用户，小程序显示“李伟您好，欢迎新用户光临本店！”

如果李伟是老用户，小程序显示“李伟您好，欢迎老用户光临本店！”

在这里面，“小黑”这个昵称，我们可以通过获取用户信息的方法来得到。

然而，昵称并不能用来判断用户的唯一性，因为叫李伟的肯定有很多。我们要用openid 来判断用户的唯一性。

openid的获取方法

wx.login() 方法可以获取微信登录凭证code使用code 可以向微信服务器换取微信用户的唯一识别标志openid 微信服务器提供的接口地址：https://api./sns/jscode2session?appid=&secret=&js_code=&grant_type=authorization_codeAppId和AppSecret 是为了确保用code换openid的人是当前小程序的开发者

注意：

AppId 是公开信息，泄露AppId不会带来安全风险

AppSecret 是小程序秘钥，不能泄露，如果发现泄露需要到小程序管理平台进行重置。

本地数据缓存

本地数据缓存：就是将小程序的数据存储在当前设备硬盘上。

本地数据缓存的作用：

存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。缓存一些服务端非实时的数据，从而提高小程序获取数据的速度。

读取缓存

异步读取：

wx.getStorage({key: 'key1',success: function(res) {// 异步接口在success回调才能拿到返回值var value1 = res.data},fail: function() {console.log('读取key1发生错误')}})

同步读取：

try{// 同步接口立即返回值var value2 = wx.getStorageSync('key2')}catch (e) {console.log('读取key2发生错误')}

写入缓存

异步写入：

wx.setStorage({key:"key",data:"value1"success: function() {console.log('写入value1成功')},fail: function() {console.log('写入value1发生错误')}})

同步写入：

try{wx.setStorageSync('key', 'value2')console.log('写入value2成功')}catch (e) {console.log('写入value2发生错误')}

有些商城页面一开始加载数据的时候，就会先把本地缓存的数据显示出来。等新的数据加载完成之后，就再用新的数据更新视图。

这种方式适用于对数据实时性/一致性要求不高的页面。

设备能力

小程序的宿主环境提供了很多的操作设备的能力，可以让我们提供开发效率，增强用户体验。

常见的设备能力：

扫码拍照操控蓝牙获取设备网络状态调整屏幕亮度

……

微信扫码能力

wx.scanCode() ：开启微信到扫码功能。

把复杂的信息编码成一个二维码，让用户去扫，可以减少用户输入。

如：餐厅点餐的小程序，我们给餐厅中每个餐桌编号，然后把编号到二维码中，扫码获得编号之后，就可以知道是哪一桌点了什么菜，从而大大提高了用户点餐的体验度。

// 点击“扫码点餐”的按钮，触发tapScan回调tapScan: function() {// 调用wx.login获取微信登录凭证wx.scanCode({success: function(res) {var num = res.result // 获取到的num就是餐桌的编号}})}