小程序开发(一)

【小程序开发(一)】**
学习路线及大纲 **
小程序开发(一)
文章图片

第一节 邂逅小程序 小程序开发(一)
文章图片

一、小程序诞生背景
市场层面
1、什么是微信小程序?
微信小程序是一种全新的连接用户和服务的方式,它可以在微信内被快捷地获取和传播,同时具有出色的使用体验。换言之,微信小程序是微信生态的一部分,它提供了一种更加方便高效的用户交互方式。
2、小程序带来了那些?
1〉便捷性
普通APP:了解app–下载–打开–注册–使用
小程序:了解app–打开(扫码/搜索)–使用
2〉优于公众号和H5的页面,提高用户体验
3〉释放手机内存
目前,小程序不能超过8M,包括在使用分包的情况下
3、小程序开发的必要性
1〉开发出的小程序,用户体验优于H5的体验,并且底层可以调用原生的各种接口
2〉一端开发,多端运行(ios端、Android端)
技术层面
1、webview的发展和不足
1〉公众号的出现,提高了webview的使用频率,不少企业和个人都需要做H5页面,但H5无法调动很多底层APP拥有的功能。
2〉微信团队提供了JS-SDK 给web开发者使用,包括拍照、音频、地图、支付、分享等能力。
3〉无法改变H5的缺点:某个页面经常白屏,交互无反馈,页面切换生硬
如下: webview 在加载一个页面时经历的过程
小程序开发(一)
文章图片

解决了调用底层功能的问题,但是没有解决用户体验差的问题
解决体验差的问题,必须依靠原生,例如Native
弊端:开发门槛高、多端开发或者试配、版本更新需要审核、版本迭代慢
出现一种新的解决方案:
小程序开发(一)
文章图片

二、小程序诞生
1、特点
1〉类似于web开发模式,入门门槛低:基本上是类似于html+css+js
2〉可直接云端更新:微信审核
3〉提升用户体验:通过提供基础能力、原生组件结合等方式,提升用户体验
4〉平台管控能力:小程序提供云端更新,通过代码上传、审核等方式,增强对开发者的管控能力
5〉双线程模式:逻辑层和渲染层分开加载,提供了管控性和开放性(沙盒环境运行js代码,不允许执行任何和浏览器相关的接口,比如跳转页面、操作DOM等)
2、小程序开发历史
2016年9月21日发布的小程序内测版
2017年1月9日正式上线
https://developers.weixin.qq.com/miniprogram/dev/framework/release/
3、小程序预备知识
小程序开发主要分为三部分:
页面布局:WXML,类似于HTML开发
页面样式:WXSS,几乎就是CSS(某些不支持,某些进行了增强)
页面脚本:JavaScript+WXS(JS以及WeixinScript后续学习)
小程序开发(一)
文章图片

三、开发前准备工作
小程序开发(一)
文章图片

1、申请AppID
登陆微信公众平台:https://mp.weixin.qq.com/cgi-bin/loginpage
根据提示一路走下去就ok啦
找到自己的开发者ID
小程序开发(一)
文章图片

2、小程序开发者工具
开放工具:官方微信web开发者工具 、VSCode
下载微信web开发者工具小程序开发(一)
文章图片

有什么问题,找微信开发者社区https://developers.weixin.qq.com/community/develop?idescene=1
四、小程序目录结构
首先将系统自带的代码删除,只保留下面两个文件即可
小程序开发(一)
文章图片

理论知识
应用程序结构
小程序结构划分:最上层 App–〉多个Page—〉多个组件
小程序开发(一)
文章图片

小程序开发(一)
文章图片

其中,app.json是程序的入口,在app.json中定义多个页面 ,到相应页面中的wxml文件中可对当前页面进行布局,wxss文件时修改页面的样式
五、小程序初体验
1、小程序的数据绑定 {{}}–>mustache
在小程序中不允许进行跳转页面,但有些东西不能一次性确定,会根据情况有所改变,此时就需要数据绑定,将要变化的值抽取成一个变量,写到js文件的data属性中。
例如:将hello后的抽象为一个变量,先在js文件的data属性中定义好,在wxml文件中使用双大括号语法,即{{}},也叫mustache语法
小程序开发(一)
文章图片

小程序开发(一)
文章图片

2、列表显示 wx:for
先在js文件中建立一个数组如下:
小程序开发(一)
文章图片

使用wx:for语法对students数组进行循环输出
小程序开发(一)
文章图片

3、事件监听改变data的值
在页面定义一个计数器,类似于上述方法
小程序开发(一)
文章图片

在js文件中定义counter
小程序开发(一)
文章图片

但此时的计数器是写死的,不能进行改变,设置两个按钮,对数值进行改变,
小程序开发(一)
文章图片

在js文件中定义各自的方法
小程序开发(一)
文章图片

完成计数器对数值进行加减的操作。
六、小程序的MVVM架构
MVVM:M(Model) V(View) VM(ViewModel)
Vue的MVVM:
小程序开发(一)
文章图片

小程序的MVVM:
小程序开发(一)
文章图片

MVVM加构将我们从命令式编程转移到声明式编程
编程范式分为:
1〉命令式范式:原生操作DOM
2〉声明式范式:Vue/React/Angular
七、小程序架构和配置
常见的配置文件:
(一般不修改)
project.config.json:项目配置文件,比如项目名称、appid等
sitemap.json:小程序搜索相关的
(经常修改)
app.json:全局配置
page.json:页面配置
1、全局配置
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
小程序开发(一)
文章图片
小程序开发(一)
文章图片

小程序开发(一)
文章图片

小程序开发(一)
文章图片

注:如果默认提供的代码格式不是很整齐,可以按快捷键Alt+Shift+F键将代码格式化,使得代码结构清晰
小程序开发(一)
文章图片

小程序开发(一)
文章图片

2、页面配置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
注:页面中配置项在当前页面会覆盖app.json的window中相同的配置项。
一般将主页面的下拉刷新关闭。
小程序开发(一)
文章图片

在子页面进行下拉刷新的相应设置。且在设置时不能使用window关键字,使用无效,要设置那个属性直接使用即可。
小程序开发(一)
文章图片

在此处可设置要编译的页面,否则每次编译完成后默认显示是首页,须手动跳转到编译的页面看效果。
小程序开发(一)
文章图片

    推荐阅读