小程序实践干货（开发类）
小娄农家 — 小程序产品体验
小娄农家 是北京密云农家乐平台之一，致力于为广大游客提供精品农家住宿，体验宁静的乡村生活。使久居都市的人们，在享受惬意环境的同时，尽享农家美味。
小娄农家小程序
开发相关资料地址：
微信小程序开发文档（学习）
https://mp.weixin.qq.com/debug/wxadoc/dev/
微信小程序demo下载
https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html
微信小程序项目实例
http://blog.csdn.net/zuoliangzhu/article/details/53862576
微信小程序weui （UI 样式库）
https://github.com/Tencent/weui
一、小程序介绍：
小程序
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
张小龙和微信团队一直强调的产品观是：好产品应该是用完即走，微信应该是给用户提供便利，而非浪费时间。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
小程序能够实现消息通知、线下扫码、公众号关联等七大功能。
小程序的定位有着很清晰的认知，大家普遍认为小程序是“小而美”“短平快“，主要为轻度用户提供服务。
从产品上讲，小程序和App本身并不冲突，甚至是互补的。小程序可以在降低App下载成本的同时，提供工具类的轻量的功能给用户，扩大自己的用户基数。
二、微信平台分类
目前，微信平台下的四种账号分类：服务号、订阅号、小程序和企业号。
1、服务号
1）定义：为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互。（类似12315，114，银行，提供绑定信息，服务交互）
2）适用人群：媒体、企业、政府或其他组织。
3）服务号页面：推送消息会弹出在对话页面内。
注：
1）群发次数：服务号1个月内可发送4条群发消息。
2）功能：群发、微信认证、高级接口、广告主、流量主、多客服、自定义菜单、微信支付、微信小店等。
2、订阅号
1）定义：为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯。（功能类似报纸杂志，提供新闻信息或娱乐趣事）
2）适用人群：个人、媒体、企业、政府或其他组织。
3）订阅号页面：推送消息会出现在订阅号页面内，点开订阅号栏，阅读推送消息。
注：
1）群发次数：订阅号（认证用户、非认证用户）1天可群发1条消息（部分媒体资讯类账号可一天多次群发）。
2）功能：群发、微信认证、普通接口、广告主、流量主等。
3、企业号
1）定义：为企业或者组织提供移动应用入口，帮助企业建立与员工、上下游供应链及企业应用间的连接。主要用于公司内部通讯使用，需要先验证身份才可以关注成功企业号。
2）适用人群：企业、政府、事业单位或其他组织
3）企业号页面：好友会话列表首层
注：
1）群发次数：群发消息次数不受限制，且具备消息主动下发能力，最高可每分钟群发200次。
2）功能：企业通讯录、应用定制、分级管理、群发、微信认证、高级接口、自定义菜单、微信支付等。
4、小程序
1）定义：一种无需下载安装即可使用的应用。开发者可以根据平台提供的能力，快速地开发一个小程序。
2）开放注册范围：个人、企业、政府、媒体、其他组织。
3）开发支持：提供一系列工具帮助开发者快速接入并完成小程序开发。
微信小程序接入流程：
1）注册：在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
2）信息完善：填写小程序基本信息，包括名称、头像、介绍及服务范围等。
3）开发：完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
4）提交审核和发布：完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。
三、微信小程序开发
小程序导图
简易教程
管理员和开发者可在开发者工具内完成小程序的开发、调试、预览、上传代码等操作。
一、获取微信小程序的 AppID
设置”-“开发者设置”中，查看到微信小程序的 AppID。
二、通过微信web开发者工具，来完成小程序创建和代码编辑。
三、编写代码
1、创建小程序实例
最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。
其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。
1）app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声 明全局变量。
2）app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。
3）app.wxss 是整个小程序的公共样式表。
2、创建页面
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。
<view/>、<image/>、<text/>来搭建页面结构，绑定数据和交互处理函数。
四、手机预览
开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验。
小程序 vs HTML5
小程序和HTML5的区别：开发成本，运行环境、运行流畅度、系统权限
HTML5传统的运行环境是浏览器
小程序的脚本发布上线要微信审核，并且强调小程序脚本内无法使用浏览器的Window对象和Document对象。
小程序解决了：HTML5网页的【加载慢、启动慢、运行慢。】
微信小程序的特点
1：无需下载：我们直接使用它，所以无须安装是小程序最基础的一个特性；
2：触手可及：当我们拿着智能手机接触周边的时候，我们可以通过手机直接获得信息，就是周边的信息；
3：用完即走：对于周边要完成的任务来说我们需要的是用完即走；
4：无须卸载：小程序看起来是程序，但是它以完全不同于过去APP的形状出现，它有更灵活的应用组织形态；
四、微信小程序能过审吗？
以下是微信官方禁止的小程序类别表：
非法、违反公序良俗等
功能过于简单
以传播谣言为目的
测试抽签（星座血缘等等）
以分级推销为目的
微信已有的功能（比如漂流瓶等）
恐怖性质较强（会给用户带来恐惧感）
要求用户越狱/root 后才能使用
除此之外，不在小程序服务范围的类别也无法通过审核。在此特意提醒大家：在开发之前，一定要检查小程序的分类是否能够通过审核。
现在已经开放的小程序的类型：
旅行、购物、交通、图片、工具、教育培训、快递查询、天气查询、投资理财、票务、阅读、视频、美食、美妆、体育、表情包、求职、音频、自媒体、游戏、社区。
可用性和完整性
1、提交的小程序须是一个完成品，要求可以打开，可以运行，且不可以是一个测试版。示例：不可运行、存在崩溃、闪退、按钮没有响应、文字表述不完整等。
2、本身会崩溃，或小程序程序会造成微信客户端崩溃的，将会被拒绝。
3、存在严重Bug的小程序（如无法添加和打开、无法返回和退出、卡顿严重等），将会被拒绝。
4、若小程序中存在帐号体系，需提供测试号，包含帐号和密码（可以体验所有功能）。
技术实现规范性
1、需要提供小程序文档和说明
2、禁止视频、音乐、语音等多媒体的自动播放
3、安装或运行其他可执行代码的程序，将会被拒绝
4、违规加载或更新代码，将会被拒绝
5、如果小程序有账户系统，必须提供能正常使用且易于发现的“退出”账户选项。
UI 规范
1、符合WeApp UI 规范
2、小程序页面内的浮层和弹窗可关闭
3、小程序的界面必须遵守微信的外观和功能，不得提供改变微信外观和功能的产品体验。
4、小程序的界面不得模仿系统通知或警告诱导用户点击。
5、小程序头像logo需使用透明或有色背景。若使用白色背景，需使用有色边框。
注：小程序页面内容审核规范，这里需要细读下。
五、微信小程序发布
微信更新至 iOS6.5.3版本 或 Android6.5.3版本。
然后，你得尝试开启一个小程序。
当你使用过某个小程序后，在微信客户端的“发现-小程序”里的列表。在“发现-小程序”中，也可以通过搜索进入小程序。
审核时间为：3-10天
重要：微信订阅号与小程序的服务类目要保证一致，另外小程序服务类目与内容要保证一致。
六、项目代码实践：
1、微信小程序尺寸单位
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx换算
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx。
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算。
2、列表垂直滚动使用
<scroll-view scroll-y="true">
知识点：
1）使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
2）项目中用的position:fixed;top:62px;bottom:0;left:0;right:0; 来达到垂直滚动效果。
3、跳转页面使用
<navigator url="/pages/syllabus/syllabus?id=2" hover-class="weui-cell_active">
知识点：
1）通过navigator url的参数设置达到不同页面的跳转
2）hover-class 指定点击时的样式类，当hover-class="none"时，没有点击态效果
4、banner滚动效果的swiper组件
<swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#ee4136" autoplay="true" interval="3000" duration="500" circular="true">
知识点：
1、indicator-dots 是否显示面板指示点
2、indicator-color 指示点颜色
3、indicator-active-color 当前选中的指示点颜色
4、autoplay 是否自动切换
5、interval 自动切换时间间隔
6、duration 滑动动画时长
7、circular 是否采用衔接滑动
5、template模板使用
<template wx:if="{{id>0}}" is="travel-{{id}}"/>
<import src="hs.wxml" />
@import "../../lib/weui.wxss";
知识点：
1、将模板所需要的 data 传入，一般我们都会使用列表渲染。通过表达式来确定使用哪个模板。
2、声明需要的使用的模板
3、模板样式引入
6、map腾讯地图定位
<map scale="15" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" covers="{{covers}}">
知识点：
1、latitude 纬度
2、longitude 经度
3、scale 缩放级别，取值范围为5-18
7、拨打电话
<text bindtap="makePhoneCall" data-tel="1340000" style="padding-left:10px;color:#090">拨打<//text>
makePhoneCall: function (ev) {
var that = this;
wx.makePhoneCall({
phoneNumber: ev.currentTarget.dataset.tel,
success: function () {
console.log("成功拨打电话")
}
})
}
知识点：
1、makePhoneCall 调用方法
2、phoneNumber 需要拨打的电话号码
3、 wx.makePhoneCall({ }) 拨打的电话定义方法
8、复制粘贴
<text bindtap="clipBoard" data-num="123" style="padding-left:10px;color:#090">复制</text>
clipBoard:function(ev){
let num = ev.currentTarget.dataset.num;
wx.setClipboardData({
data: num,
success: function(res) {
wx.showToast({
title: '已复制到剪贴板',
icon: 'success',
duration: 2000
});
}
})
}
知识点：
1、clipBoard 调用方法
2、wx.setClipboardData 复制粘贴方法
七、项目中踩过的坑：
1、小程序代码包大小？
小程序一开始时代码包限制为 1MB，但很多反馈说代码包大小不够用，经过评估后放开了这个限制，增加到 2MB 。
2、微信小程序是否可以加外部链接？
1、小程序不能添加外部链接的。所有A标签的href是无效的。
2、Window 对象不能使用 所以 Window. location .href 也是无效。
3、window .open 同理。
3、小程序是否能支持iFrame嵌套？
不行，现在小程序还没有这个组件
4、小程序支持实现分享内容或链接到微信好友的功能吗？
API中没找到分享的接口，搜索到的几篇文章说不能分享到朋友圈
5、客服按钮contact-button
<contact-button type="default-light" size="20" session-from="weapp"></contact-button>
6、小程序中如何使用【长按识别图中二维码】功能
查了一些资料，目前并不能
7、文章的内容如何排版
微信官方weui （UI 样式库）
8、小程序里引用腾讯视频链接，播放不了
<video src="http://v.qq.com/iframe/player.html?vid=t03678tzi4s&tiny=0&auto=0" controls></video>
这样子是播放不了的
需要引入原始视频地址，不能用CDN地址。
可以把视频放服务器或者虚拟主机上。暂时用的是mp4的格式
9、一个公众号能开发多少个小程序
可以添加5个小程序
10、编辑器会出现一些莫名其妙的BUG
重启/重装工具大法：可以考虑重新编译或多次重启工具或重启电脑；
