微信小程序开发和组件化总结|社区征文

社区征文

微信小程序是什么

微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。

————张小龙

目前,小程序早已不再局限于“用完即走”,各种各样功能的小程序都已实现,有视频类、直播类、工具类、长内容型等,甚至还有微信小游戏。

微信小程序 属于 Web App、Native App 还是 Hybrid App

Web App

Web App 指与桌面软件应用程序或移动应用程序具有类似功能的网站。具有开发简单、高效,更新灵活、跨平台等优势。但缺点与优点并存,Web App 性能、体验较差,无法使用照相机、系统通知、本地缓存等原生特性。

Native App

Native App 使用 Objective-C(iOS)或者 Java(Android)开发。具有性能、体验非常良好,组件支持完善、接口丰富等特点。但Native App最大的缺点在于,不能跨平台,有多少个平台就要开发多少个版本。

Hybrid App

Hybrid App 也称为混合式 App。Hybrid App 看上去像一个 Native App,但实质上 Native 只是作为一个容器,将 Web App 包裹了起来,在容器内部实质上运行的还是网页。目前主流的应用中,纯粹的原生 App 很少,绝大多数都属于混合式 App。比如,我们常见的京东、淘宝等电商类 App,由于商品及业务变化非常频繁,需要经常调整,所以这类 App 的主要页面都是采用 Web 技术来构建,然后用 Native 包装。

有一些开发者认为微信服务号里的网页应用也属于 Hybrid App,因为这些网页应用也属于微信这个 Native 应用的一部分,同样运行在微信内置的浏览器中。但严格意义上来说,它不属于以上3种中的任何一种,在实现技术上小程序同传统的 Hybrid 还是有很大的不同的。小程序采用 JavaScript 和 CSS 这类常见的 Web 技术开发,但它又不使用 HTML,和 Web 没有直接的联系。如果要将小程序强制归类,那它实质是 Hybrid 技术的应用,非原生,但使用到了 Web 技术(JavaScript 和 CSS)。

微信小程序组件化

基础组件

小程序提供了丰富的基础组件,例如,你需要在界面上显示地图,在 WXML 中添加 map 标签即可:

<map></map>

使用组件的时候,还可以通过属性传递值给组件,让组件可以以不同的状态去展现,例如我们要在地图的组件上传递一个坐标(经度和纬度):

<map longitude="..." latitude="..."></map>

组件的内部行为也会通过事件的形式让开发者可以感知,例如用户点击了地图上的某个标记,你可以通过传递一个 markertap 函数来处理:

<map bindmarkertap="markertap"></map>

还可以通过 style 或者 class 来控制组件的外层样式,以便适应你的界面宽度高度等。

模板组件

WXML 提供模板(template)标签,可以在模板中定义代码片段,然后在不同的地方复用它们。

定义模板

使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段:

<template name="item">
  <view class="item" bindtap="{{tap}}">
    <image src="{{img}}" />
    <view>{{name}}</view>
    <button wx:if="{{btn}}" open-type="{{btnType}}" class="absolute-btn">123</button>
  </view>
</template>

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入:

<block wx:for="{{items1}}" wx:key="unique">
  <template is="item" data="{{...item}}" />
</block>

另外,is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

自定义组件

从小程序基础库版本 1.6.3 开始支持,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。

创建自定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。首先需要在 json 文件中进行自定义组件声明,将这一组文件设为自定义组件:

{
  "component": true
}

同时,要在 wxml 文件中编写组件模板,还可以在 wxss 文件中加入组件样式,它们的写法与页面的写法类似。在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。

Component({
  options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

使用自定义组件

使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

<!-- 以下是对一个自定义组件的引用,自定义组件的 `wxml` 节点结构在与数据结合之后,将被插入到引用位置内。 -->
<component-tag-name inner-text="Some text"></component-tag-name>

开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段,在此处声明的自定义组件视为全局自定义组件,在小程序内的页面或自定义组件中可以直接使用而无需再声明。

第三方自定义组件

小程序从基础库版本 2.2.1 开始支持使用 npm 安装第三方包,我们可以使用其他开发者已经开发好的组件库以提高小程序的开发效率。这意味着我们不需要从0开始构建一款小程序了,许多现成的组件都可以直接拿来使用。

安装 npm 包

在小程序 package.json 所在的目录中执行命令安装 npm 包:

npm install packageName

构建 npm

点击开发者工具中的菜单栏:工具 --> 构建 npm。

picture.image

使用 npm 包

构建完成后即可在 js 中引入 npm 包:

const myPackage = require('packageName')
const packageOther = require('packageName/other')

或在 json 文件中引入 npm 包中的自定义组件:

{
  "usingComponents": {
    "myPackage": "packageName",
    "package-other": "packageName/other"
  }
}

使用 npm 包时如果只引入包名,则默认寻找包名下的 index.js 文件或者 index 组件。

另外,小程序支持发布 npm 包(专为小程序定制),但有一些约束:不支持依赖 c++ addon、不支持依赖 nodejs 的内置库、一些全局变量(如 window 对象)和构造器(如 Function 构造器)无法使用等。

总结

小程序的开发同普通的网页开发相比有很大的相似性。小程序的整个开发流程需要经过申请小程序帐号、安装小程序开发者工具、配置项目、发布等过程。但我们还可以选择第三方框架来开发小程序,比如一些开发者希望使用 Vue、React 等成熟的框架来开发小程序,那可以选择使用 Uniapp 或 Taro 等会更顺手,且可以使用一份代码同时运行在在多个不同的小程序平台上。

而在小程序后端技术栈上,我们不仅可以使用传统的 PHP/Java/Python/Node 等服务端语言来开发,还可以选择使用小程序的”云开发“(微信团队联合腾讯云推出的专业的小程序开发服务,在新建小程序项目时后端服务选择“微信云开发”)。

545
1
0
1
关于作者
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论