微信小程序开端

菜蛋_
262 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

什么是小程序

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序和普通网页开发的区别

  • 运行环境不同（根本上的不同）
    • 网页运行在浏览器中，要考虑浏览器的兼容性，是单进程单线程，网页可以访问完成的dom和bom对象
    • 小程序运行在微信上的，要考虑iOS和Android以及微信开发工具环境下的兼容性。微信是多进程多线程的。脚本线程和渲染线程是分开的。小程序没有dom和bom
    • 网页开发渲染线程（html、css）和脚本线程（js）是互斥的（不能同时执行），这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。

小程序的运行环境

分成渲染层和逻辑层（是分离的，独立工作的）其中wxml模板和wxss样式工作在渲染层。js分布在逻辑层。
渲染层使用了webview（相当于解释器）进行渲染。逻辑层采用JSCore线程运行js脚本。一个小程序存在多个界面，所以渲染层存在多个webview。一个小程序存在多个界面，所以渲染层存在多个webView线程，这两个线程的通信会经由微信客户端Native做中转，逻辑层发送网络请求也经由Native进行转发。（Native指的是微信客户端，微信软件，UI之前想要通信的话，需要先发送给Native微信客户端内核，然后由Native客户端来进行传递）。

创建小程序的步骤

  1. 下载并安装好微信开发者工具，提前注册号小程序
  2. 在微信开发者工具中选择项目，新建项目，选择小程序
  3. 填写项目名称，目录也就是保存的地址，AppID是注册小程序时每个人独有的ID号，开发模式选择小程序，后端服务有微信云开发和不使用云服务，没有什么要求的时候选择不使用云服务。模板选择没有要求是选择js基础模块。

文件及一些功能的介绍

App.wxss里面放的是全局的样式。 image.png
全局的配置文件

image.png
小程序开发工具的配置文件

image.png
wxml文件（相当于html）

image.png
真机调试

image.png
上传、版本管理，详情里的本地设置的基础库就是小程序的版本，半分比就是使用的占比。

image.png

image.png

小程序的代码构成

  • .json后缀的JSON配置文件
  • .wxss后缀的wxss样式文件
  • .js后缀的js脚本逻辑文件

全局配置文件

全局配置文件指的是根目录下的app.json文件，是小程序进行全局配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置对tab等。
全局配置文件为一个JSON对象，有以下属性：

  • entryPagePath:指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等，如果不填，将默认为pages列表的第一项，不支持带页面路径参数。

image.png

  • pages（最重要）：用于指定小程序有哪些页面组成，每一项都对应一个页面的路径（含文件名）信息，文件名不需要写文件后缀，自动匹配。未指定entryPagePath时，数组的第一项代表小程序的初始页面（首页）。小程序中新增、减少页面，都需要对pages数组进行修改

image.png

  • window:用于设置小程序的状态栏、导航条、标题、窗口背景色。

image.png

image.png

image.png

  • tabbar：如果一个小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。

image.png

image.png
其中list接收一个数组，只能配置最少2个，最多5个tab。tab按数组的顺序排序，每个项都是一个对象，其属性值如下：

image.png

  • networkTimeout:网络超时时间
  • debug:是否开启debug模式，默认关闭。在开发者工具的控制台面板，调试信息以info的形式给出，其信息有page的注册，页面路由，数据更新，事件触发等。可以帮助开发者快递定位一些常见的问题。
  • functionalPages:插件所有者小程序需要设置这一项来启用插件功能页。
  • subpackages:启用分包加载时，声明项目分包结构。
  • workers:使用worker处理多线程任务时，设置worker代码放置的目录。
  • requireBackgroundModes:申明需要后台运行的能力，类型为数组。目前支持audio：后台音乐播放。location：后台定位。
  • plugins:声明小程序需要使用的插件
  • preloadRule:声明分包预下载的规则
  • resizable:在iPad上运行的小程序可以设置支持屏幕旋转。
  • usingComponents:全局自定义组件配置
  • permission：小程序接口权限相关设置
  • sitemapLocation：指明sitemap.json的位置
  • style：指定使用升级后的weui样式
  • useExtendedLib：指定需要引用的扩展库
  • entranceDeclare：微信消息用小程序打开
  • dark mode：小程序支持dark mode
  • themeLocation：指明theme.json的位置，darkmode为true为必填
  • lazyCodeLoading：配置自定义组件代码按需注入
  • singlePage：单页模式相关配置
  • supportedMaterials：聊天素材小程序打开相关配置

image.png

sitemap配置

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否被微信索引，文件内容为一个JSON对象，如果没有sitemap.json，则默认为所有页面都允许被索引；sitemap.json有以下属性：

配置项

image.png

  • rules的属性

image.png

  • matching的取值说明

image.png
代码示例：

image.png

avatar
文章
阅读
粉丝