初识微信小程序

Posted 2021-01-14 dugou

小程序是一种新的开放能力，开发者可以快速的开发一个小程序，小程序可以在微信内被便捷的获取和传播，同时具有出色的使用体验

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用，也体现了“用完即走”的理念，用户不关心是否安装太多应用的问题 应用将无处不在，随时可用，但又无需安装卸载

特点
速度快 无需下载安装，加载速度快于html5，微信登陆，随时可用
无需适配 一次开发，多端兼容，免除了对各种手机型号的适配
社交分享 支持直接或者APP分享给微信好友和群聊
出色体验 可以达到近乎原生App的操作体验和流畅度，在离线状态下亦可使用
用完即走，随手可得 通过扫码、长按、微信搜索、公众号、好友推荐等方式快速获取 服务，用完即走
低门槛 已有公众号的组织可快速注册，可快速生成门店小程序

特点表现
无需安装，快速访问（app=100M VS 小程序<4M）
随处可得，易于分享
出色的体验
                     APP  普通网页 小程序
开发成本          高          低          低
用户获取成本   高          低          低
用户体验          高          低           高
用户留存          高          低           高

小程序不是网页，也不是APP，是一种全新的用户体验

小程序行业应用
智慧零售
　　场景赋能 线下购物线上
　　营销赋能 渠道会员品牌
　　社交赋能 礼物 社交 销售
电商行业
　　电商平台 用户自建购物共享群
内容电商
品牌电商 
　　沉浸式用户体验，丰富的购物场景，闭环的场景能力，大数据分析工具

生活服务
　　出行 餐饮 旅游 共享

政务民生
　　公安 医疗 税务 邮政

高校
　　查询学校线上服务 小程序内领取、查看校园卡 通过小程序进出图书馆、食堂支付

小游戏
　　跳一跳 星途 欢乐坦卡大战 欢乐斗地主

 

开发流程

HTML5       1 能力很少    2 体验差         3 强烈依赖于开发者素质
H5+JSSDK 1 无法管控   2 安全问题     3 依赖开发者的素质
小程序        1 强管理       2 统一开发体验

开发语言
　　渲染层 WXML+WXSS（类似于 HTML+CSS ）
　　逻辑层 javascript
　　配置 JSON

开发流程 1 申请账号 2 完善信息 3提交代码 4审核发布
小程序设计规范 友好（突出重点） 流程明确
清晰 导航明确 减少等待 异常反馈
便捷 利用手机特性使用户便捷、优雅的操控页面
1减少输入 改善输入体验 2避免误操作 3操作流畅
统一 视觉统一
需要在小程序运行过程中，动态的从服务器端去获取，然后再渲染输出到这个视图中进行显示的
///////////////一般情况///////////////

一般来说会在页面加载的过程中，通过一个ajax调用请求server返回本周推荐电影的详细信息；

////////////////
我们应该有一种机制能够让这个视图中的每一个部分与对应的数据做一个映射
在小程序框架中，每个页面所需要的各种数据，都是集中在这个页面所注册的页面对象中定义的
要把数据值渲染输出到视图上显示，我们是通过双大括号进行数据绑定的
我们可以对内部状态变量进行一些运算或者对它们进行一些组合来进行输出显示
{{(count>=)60?"及格":"不及格"}}

通过开发者工具调试器的 APPdate 这个 type ，我们可以实时的调试每个页面的所有内部状态变量的取值
小程序的运行环境和基本架构。
每个小程序都是运行在它所在的微信客户端上，通过微信客户端给他提供运行环境，小程序可以直接获取微信客户端的原生体验和原生能力
视图层（渲染层）【wxml 视图文件、wxss 样式文件】和逻辑层【js json】

运行环境（宿主环境）

条件渲染-----条件成立才会渲染

wx:if="{{thisWeekMovie.isHighlyReCommended}}"
强烈推荐这个 text 元素，它的渲染条件是绑定在thisWeekMovie的 isHighlyReCommended 这个数据上------当博主有对这个电影标记为强烈推荐的时候，返回这个属性值为 ture ，那么这个时候渲染生成条件成立，这个元素会渲染成功

<text hidden="{{thisWeekMovie.isHighlyReCommended}}" style=‘font-size:46rpx; color:red;‘>强烈推荐</text>
使用 hidden 属性时，这个元素总是先被渲染生成，hidden 属性只是控制了其可见性而已

对于可见性需要频繁切换的时候，我们不建议使用条件渲染
强烈推荐这个元素的渲染条件，使用户不会发生去发生切换；

对于 hidden 而言，即使用户得到了数据里面，博主没有强烈推荐这个电影，那么他也会在初始生成的时候去生成这个元素
列表渲染 重复的渲染生成组件
wx:for="{{weeklyMovieList}}"
<swiper></swiper> 元素 滑动组件
<swiper style=" background:#eee;" indicator-dots=‘{{true}}‘>
<swiper-item>123</swiper-item>
<swiper-item>456</swiper-item>
<swiper-item>789</swiper-item>
</swiper>

indicator-dots=‘{{true}}‘ 页面指示灯
previous-margin=‘50rpx‘ next-margin=‘50rpx 上下两张照片显示50rpx

catchtap 当前元素自己对用户的交互做出响应

1，小程序网络相关API
wx:request wx:uploadFile wx:downloadFile WebSocket 相关 API

2，wx:request发起HTTP request，调用Server端的一个API来获取数据或者操作数据
基本参数:发起一个什么样的请求
回调函数：收到response之后或者调用失败时如何处理
3，异步调用
4，服务器域名配置
------常见的页面处理函数------
onPullDownRefresh--下拉刷新时被调用
onReachBotton--上划触底时被调用
onPageScroll--在页面上滑动的时候被调用
onShareAppMessage--点击分享时被调用