微信小程序-常用API开发技巧学习笔记

常用API开发技巧学习笔记

第一章 认识微信小程序

  微信小程序是一种不需要下载安装即可使用的全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有“用完即走,不用关心是否安装太多应用”的使用体验。
  微信小程序做成了一个开放式的平台,它让开发者可以将自己的想法做成微信小程序的服务放在平台上供人们使用。通过微信小程序的开发,应用将无处不在,随时可用。在进行开发之前,需要进行注册,绑定开发者等一系列操作。详情移步微信官方文档
在这里插入图片描述
  笔者观看的教学视频于2017年初拍摄,所以当时最新的开发者工具版本为0.11.122100版,现官方文档中提供的最新版本为1.02.1907112版本。
是真的不需要下载安装即可使用吗?
不是的,微信小程序的安装包小于1MB(最新版改为2MB),在用户点击使用的时候,就不到1MB的安装包,下载安装的时候,用户本人是感受不到的。
在这里插入图片描述

前后端分离的开发方式

  前端先制造假数据,可以将假数据在页面很好的展示之后再和服务器的数据进行相应的对接。
  前端驱动服务器开发的设计理念。由此目的在于设计比较合理,api较方便。

小程序的特点
  • 小程序适合做简单的、用完即走的应用
  • 小程序适合做低频的应用
  • 小程序适合性能要求不高的应用(被折叠放入微信,在操作系统之间还是隔了一层的,不能满足性能高的应用)
    【此处可查阅小程序、外部,混合app、原生应用的性能区别】
    哪些应用适合小程序开发?
    例子:
    1、知乎------不太适合小程序开发
    原因:
    (1)知乎是数据型应用,用户停留时间较长,不能满足用完即走的特点。(如果阅读的时候突然来了一条消息,则会被迫退出。回来的时候找不到原来的位置)
    (2)知乎的使用频度较高,不能满足低频使用的特点。让用户多次打开微信再打开小程序会用户体验不好。
    (3)知乎的消息发布依赖于系统推送,但是小程序的推送是一种模板推送,属于一种被动触发。当用户做一些操作的时间可以作为一个消息反馈给用户。
    (4)小程序不支持UIView。也就是说,小程序没办法去加载一个网页(服务器静态化好的HTML页面)。
    2、饿了么/猫眼电影/滴滴打车------适合小程序开发
    特点:
    (1)业务逻辑简单
    (2)使用频度不算高
    (3)提交订单(表单)性能要求不高
    3、对于中大型应用,可以将某些功能拆分出来做成小程序
    比如:
    美团的点外卖、银行的信用卡查询等单点的服务
    在这里插入图片描述
小程序对开发者的影响
  • 短期内将提升市场对JavaScript程序员的需求量
  • 小程序是0基础开发者很好的入门平台
  • 小程序不可以使用现有的JavaScript组件库
  • 因为小程序的平台是封闭的,小程序是不支持很多组件
    库,比如DOM的,所以以DOM为对象的组件库都是用不了的。
    小程序的思想是数据优先,所以不能操作DOM。
  • 开发环境和开发逻辑较简单,适合新手入门
学习小程序需要的基础
  • JavaScript
  • CSS
  • ES6-很好的特性构建简洁的小程序代码
    在这里插入图片描述
第二章 小程序环境搭建与开发工具介绍
小程序开发环境

前往开发工具下载地址去下载
下载完成之后,通过微信扫一扫打开开发者工具,选择新建项目
在这里插入图片描述
AppID选择使用测试号(因为注册小程序号比较麻烦)
其他选项设置好之后选择创建,进行创建新的小程序项目
平台会自动生成一个小程序HelloWorld的demo
在这里插入图片描述
  此工具左边是效果区,右边是代码区。它有一个特点就是修改某些参数不需要编译就可以预览。直接Ctrl+S就可以看见修改的效果。
在这里插入图片描述
调试区用来打断点调试代码。点击上方菜单栏的调试工具按钮打开调试区。
在调试区的js文件:
  带sm后缀的是用来打断点调试的文件,和写的代码是一样的。
  不带sm后缀的是编译过后的文件,和写的代码也是一样的。只不过第一行出现了一个编译的信息。

没有小程序号对开发者的限制

1、不能上传和发布小程序
2、不能真机运行,只可以在PC模拟器中运行
3、录音、网络状态、罗盘、拨打电话等功能无法使用
4、获取用户信息的流程是模拟的而不是真实的
但是,不影响我们学习小程序开发

调试的几个区域

在debug的断点状态时,快捷键和Crome是一样的。

Console区域—系统编译区
  • 编译错误的报错信息
  • 警告信息
  • 用console.log输出的调试信息

在这里插入图片描述
注:在打开调试区的状态下点击下图标注的按钮,可以单独将调试区打开一个窗口,并将Console折叠放在窗口下方。
在这里插入图片描述

NetWork区域—网络信息的列表

和Crome的NetWork一模一样

  • 网络链接的列表
  • 加载的文件
  • 加载耗费的时间
  • 具体查看每一个网络请求信息
Storage区域—本地缓存列表

用来查看小程序本地缓存数据
在这里插入图片描述

AppData区域—所有页面被绑定数据情况

在这里插入图片描述

wxml区域—小程序的UI界面和代码联调

鼠标停留在右边代码上面的时候左边页面显示对应的UI元素
在这里插入图片描述
模拟器的上面菜单栏有按钮切换前后台,用来模拟打开别的小程序,本程序在后台运行的动作。当后台运行时在小程序里会触发一个事件。

注:如何快速打开小程序api文档–点击上面菜单的:微信开发者工具–>关于–>打开api文档

第三章 从一个欢迎页开始制作小程序

生成HelloWorld小程序之后点击它的主页面进入一个子页面可以查看启动的日志信息。
在这里插入图片描述

小程序文件类型与目录结构
  • js文件:行为文件
  • json文件:配置文件,对应一个个配置
  • wxml文件:对应html文件,编写小程序骨架
  • wxss文件:对应css样式文件
  • app文件:描述应用程序整个状态,是惟一的
    对于一个样式来讲以离页面最近的配置为准

在这里插入图片描述

应用程序和页面之间的关系

注:下图的无限多个只是理论上的。过多的页面违背小程序的设计初衷。小程序的总体的压缩文件包的体积超过1MB将不能上传(最新版本上传限制在2MB)。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值