微信小程序开发系列:小程序入门

相信大家对小程序都有所了解了

这里长话短说,直奔重点:

一、小程序的应用场景:

  • 个性化传播、营销(线上商场、门店等)
  • 专业工具类(单位换算、打卡等)
  • 微服务(公交、外卖点餐)
  • 社会辅助(群工具、名片等)

二、小程序的五大特点:

  • 高效:调用原生UI组件
  • 云端发布:用户不用安装与卸载
  • 微信接口:调用微信提供的API接口实现丰富功能
  • 基于微信:在微信APP内运行
  • 传播:微信任务栏、扫一扫、转发分享和搜索

注释:

API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。如可以调通过API调用日期、时间。

三、开发方式对比:

(1)与移动Web端开发差异:

开发差异 微信小程序 移动端Web
渲染机制 JS调用WebView + 原生UI DOM渲染
网络请求 微信requst接口 JS网络请求库
生命周期 类似APP,完整的生命周期 无状态/SPA

注释:

WebView(网络视图)能够加载网页,可以将其视为一个浏览器

(2)微信小程序、移动端Web、移动APP三种开发方式的对比:

对比项 微信小程序 移动Web端 移动APP
移动开发成本 中等
操作体验
通用性 中等 中等
功能拓展
运营成本

四、开发工具简述:

1、代表菜单栏

2、代表工具栏

3、代表模拟器

4、代表编辑器

5、代表调试器

调试器:

console页:控制台信息页

作用:

(1)开发者直接在此输入代码并调试

(2)显示小程序的错误输出

Sources页:源文件调试信息页

用于显示当前项目的脚本文件

Network页:网络调试信息页

用于观察和显示每个元素的请求信息和套接字状态等网络相关的详细信息

注释:套接字

TCP用主机的IP地址加上主机上的端口号作为TCP连接的端点,这种端点就叫做套接字(socket)或插口。

套接字用(IP地址:端口号)表示,它是网络通信过程中端点的抽象表示,包含进行网络通信必需的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议端口,远地主机的IP地址,远地进程的协议端口。

storage页:数据储存信息页

用于显示当前项目使用储存API接口的数据存储情况

APPData页:

用于调试显示当前小程序项目此时此刻的应用具体数据,实时地回显项目数据调整情况。(这里的调试修改不会保存在代码中)

五、目录结构:

(一)

要点:

(1)wxml文件相当于html文件

(2)wxss文件相当于css文件

(3)每次运行小程序的时候都要先运行app.js文件,它相当于入口文件

(4)app.json为全局配置,用于配置小程序由哪些页面组成,配置小程序的窗口颜色等;

(5)app.wxss为全局样式

(6)app.js用于监听并处理小程序的生命周期函数、声明全局变量、调用API.

注释:app.js与app.json是必须的

(二)

要点:

小程序页面是由相同路径下同名不同缀的2~4个文件组成:

(1).js后缀的文件是脚本文件,该文件实现页面逻辑与事件的处理

(2).json后缀的文件是页面配置文件

(3).wxss后缀的文件是页面样式表文件

(4).wxml后缀的文件是页面结构文件,该文件与wxss文件一起构建出页面

注释:.js与.wxml文件是必须的

(三)

JSON配置中包含了四个方面

(1)Pages页面

(2)Window窗体

(3)TabBar底部导航栏

(4)Debug调试

Pages页面:这个页面下是一个数组,数组内注册小程序所有用到的页面路径,小程序会在每一个注册的路径下寻找相应的页面文件、它还可以在微信开发者工具中自动生成页面文件

Window窗体:用于设置window窗体的展现样式,包含了顶部的标题、背景色、顶部导航栏的背景色和前景色、是否允许开启下拉刷新和反馈等等

TabBar底部导航栏:用于设置底部导航栏的文字,样式

Debug调试:设置布尔值,代表开启或者关闭

JSON配置的优先级:

小程序配置遵循局部配置覆盖全局的策略,页面级的配置优先级要比全局配置的优先级高,当存在同样的配置项时候,页面及配置会覆盖全局配置

六、小程序中的腾讯云:

小程序中的腾讯云为开发者提供了免费的开发环境和生产环境

使用方式:

(1).在小程序管理后台开通腾讯云服务;

(2)建立腾讯云Node.js启动模板

(3)小程序和服务器端同步开发

注释:

生产环境可理解为小程序上线后的服务器端运行环境

猜你喜欢

转载自blog.csdn.net/qq_42322103/article/details/81747877
今日推荐