(4)小程序开发基础(含实战总结,持续更新~~)

小弘帽
257 阅读7分钟

本系列主要是爪哇前端高阶课程的笔记整理,所以在讲述知识点的同时会延伸映射一些面试题

前言: 本文主要是实战中的一些总结,主要是记录开发小程序中遇到的一些坑,所以很多基础部分的知识会粗略带过,具体基础部分知识可以查看小程序的官方文档,我使用的开发编辑器是微信提供的微信开发这工具,所以以下知识点都是基于改开发者工具进行调试开发总结出来的。

本篇文章包含以下知识点

  • 小程序双线程模型介绍
  • 小程序项目文件介绍
  • 小程序主要API
  • 小程序的实战遇到的问题

小程序双线程模型介绍

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由微信客户端（下文中也会采用 Native 来代指微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发，小程序的通信模型下图所示。这也是一个经典的事件驱动视图模式。

  1. 为什么不适用浏览器线程模型? 因为单线程会有性能问题,计算会阻塞渲染
  2. 为什么不使用Web标准而自建规则? 性价比高,能够自己建立标准

新建项目以及各代码文件介绍

    打开微信开发工具,小程序为我们提供了小程序代码模板,类似于vue中的脚手架,笔者在写这篇文章的时候,小程序已经能够给我们提供TS环境的代码模板,以及零售电商等特殊的模板,这里我们选择第二个,即JavaScript-基础模板,然后选择不是要云服务,填写个人APPID, 点击确定后就可以生成了,第一次开发小程序的同学,需要先去注册生成一下自己的APPID。

生成的文件主要如下:

pages:主要是存放我们的页面文件的

utils:主要存在一下公共的js文件和wxs,实际开发中,我们常常会把封装好了的接口请求文件,枚举类文件以及公共方法放在这里面
.eslintrc.js: 主要是是eslint的配置，用于代码规范的。

app.wxss: 写全局样式的文件
app.json: 这个文件涵盖的内容就比较多了,具体可见官方文档,笔者项目的app.json他主要包含了以下配置:

  • pages:所有页面的文件路径(不包含组件的文件路径)

  • windows:全局的默认窗口表现

  • tabBar:首页底部 tab 栏的表现

这些跟外层的pages(主包)同级的都是我们分出来的包,分包里面也有pages,里面写着此分包的页面文件,分包为什么存在,是因为小程序最大只能支持20M,而当我们的主包超过2M时,就需要分包了,所以我们的小程序不能放太多静态资源,应该尽可能的把静态资源放在服务器。具体的分包大小还可以在开发工具里直接查看(如下)

目前小程序分包大小有以下限制：

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M
  • 主包也可以有自己的 pages，即最外层的 pages 字段。
  • tabBar 页面必须在主包内

微信还有一种叫做独立分包,开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。独立分包比较特别,独立分包不依赖主包,我们在微信直接打开独立分包页面,小程序的主包是不会下载的。

  1. 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）
  2. 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
  3. App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
  4. 独立分包中暂时不支持使用插件。
  • requiredPrivateInfos: 自 2022年7月14日后发布的小程序,使用相关地理位置相关接口时，需要声明该字段，否则将无法正常使用,详细内容可见官方文档

page注册页面常见参数

接口请求数据一般放在onload请求,onLoad和onShow的区别在于;onload在初始化页面的时候调用,而onShow是在页面显示/切入前台时,都会触发,举一个场景,比如

小程序常用API wxs 组件等介绍

  • 页面与页面之间的跳转常用wx.navigateTo,
  • 如果是tabbar页面的切换,就需要用wx.switchTab,
  • 当然页面跳转还可以直接在wxml使用标签包裹内容,点击这部分内容就会跳转到指定的url页面

  • 微信小程序 wx.setstorageSync和wx.setstorage都是能把值保存在微信小程序缓存中，类似于浏览器的localstorage概念，wx.setStorage是异步的：就是这个在执行中不会影响其他代码的执行，wx.setStorageSync是同步的：要等待这个代码执行完才会去执行其他的代码,推荐使用wx.setstorageSync和wx.getstorageSync
  • wx.showToast 和wx.showModal同时只能显示一个

小程序的视图层包含wxml  wxss wxs

wxml相当于html,

wxss就相当于 css,

wxs:小程序脚本语言,在wxml页面不能够写表达式,例如下面的一个日期转换的方法,就只能够写在wxs里面,然后在wxml顶部引入这个wxs文件,再去调用这个方法
wxs:


wxml:

wxs优点:一定程度上可以缓解跨线程通信的开销

  • 非纯JS语法,不支持ES6
  • 不能调用其他JS文件函数,不能使用小程序API
  • 不能作为自定义组件的事件回调

项目中遇到的问题汇总

  • 小程序的<>image/>标签有一个mode属性,我们常用到的有

aspectFill：*满屏*，且不失比例，但是可能不能完整显示图片

aspectFit:等比缩放了图片，相当于安卓的scaeType="centerInside"，*能够完整显示图片*

  • 当你一级页面向二级页面传递参数时,如果该参数过大,就会报错,此时你可以通过转码的方式 ,转码之后,到二级页面再去解码,就可以实现页面传参

    // 一级页面 toRectifyDetail:function (e) { console.log(e); let title = e.currentTarget.dataset.title let jsonStr = encodeURIComponent(JSON.stringify(e.currentTarget.dataset.data)); wx.navigateTo({ url: ../bus_eleStationNewEndDatail/bus_eleStationNewEndDatail?title=${title}&disabled=true&rectificationList=${jsonStr}, }) } //二级页面接收 let model = JSON.parse(decodeURIComponent(options.rectificationList));

  • 在输入法没有小数点,需要把input的type改成digit

  • 小程序页面在开发者工具的时候显示正常,但是到了IOS苹果系统,就会出现页面不固定的情况


    出现这种情况的主要是因为有width宽度超出屏幕了,这个时候就只能够使用真机调试模式,逐步排查,检查到底是模块的宽度超出。

  • 小程序在wxml页面传参的时候,经常会利用data-xxx进行绑定参数 ,但是xxx不允许使用驼峰写法,要不然你在js页面 e.currentTarget.dataset.xxx获取值的时候,是取不到值的

  • 小程序使用scroll时,常常会在下拉的时候重新调用接口刷新数据,如果下拉过于频繁,用户体验会很不好,例如

    <scroll-view style="height:{{scrollheight}}rpx;" class="container-body" scroll-y="true" scroll-top="{{scrolltop}}"
    lower-threshold="50"  bindscrolltolower="scrollLoading"  bindscrolltoupper="refreshPage">

主要原因是加了bindscrolltoupper,我们可以把他替换成bindrefresherrefresh

avatar
文章
阅读
粉丝