028-85523238

合作从这里开始

我们专注:网站设计、移动应用、系统开发、网站SEO及网站营销及品牌策略与设计

主营业务:官网建设、微信小程序开发、H5、手机移动APP、信息报送平台、各类管理系统、云产品·运维解决方案

您有项目想和我们谈谈吗?

可以通过填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与您取得联系。当然也欢迎您给我们 发送邮件或是电话,让我们听到您的声音

微信扫一扫 创企全知道

深入沟通,只为更深度的合作

创企科技 > 首页 > 建站知识
08
Jun.

小程序开发需要关注的几个知识点


内容主要涉及到小程序相关的五个方面。

  1、Text组件

  2、单位(RPX)

  3、生命周期

  4、template模板

  5、播放器插件

  逐一来看一下。

  一、Text组件

  小程序中view组件的使用相当于就是一个div标签,而text组件相当于就是一个文本标签b/span这样子,然而,其实一段文字我们可以使用text组件来包裹,也可以不用text组件而直接使用view组件来包裹,那二者有什么区别呢?

  很明显,小程序给TEXT组件赋予了特殊能力。而且使用TEXT组件包裹文件更容易控制它的样式。所以,通过一些个对比和测试,我对text组件的认识就是两点:

  1、用TEXT组件包裹的内容好写样式,来控制它的显示UI。

  2、在小程序中只有TEXT包围的文本才可长按选中,这一点小程序给text组件赋予了一个属性。
  二、单位RPX

  谈一下我对RPX这个单位的认识, 小程序特有的一个单位。首先,小程序开发可以看成是一个移动web的开发。 竟然是一个移动端的开发,那么我们就应该用移动端的思维去写代码,就移动端有一些特殊的特征需要我们去考虑,比如:

  1、最重要的!,如何在不同的机型上做适配。

  2、模拟器ip6分辨率375和设计稿750的因为所以然关系。

  这张图我已经在多个地方讲过了,通过这张图我们可以知道,模拟器ip6的375是一个逻辑分辨率的概念,单位可以认为是PT,它和我们日常布局中的CSS像素在数值大小上是同一个东西,而物理分辨率(如上750*1334)才是设备真正分辨率的概念,它和前面说的逻辑像素数值上有一个对应的关系(Reader)。也就是表示一个逻辑像素包含几个物理像素问题。知道了这些之后,我们就来看一下小程序序里RPX那点事。

  我们来看一下RPX的作用,看它解决了一个什么问题。

  1、ip6下1px =1rpx=0.5pt

  这里说的PX指的是物理分辨率1px。这个就是小程序的规定,以ip6的物理像素750X1334为视觉稿进行设计,只不过小程序定了个不一样的单位叫RPX(responsive pixel)。然而,使用RPX,小程序会自动在不同的分辨率下进行转换。从而达到适配的效果。

  小程序开发需要关注的几个知识点

  可以理解:小程序中的RPX相当于就是移动端开发中PX/rem/em等单位用来表示视觉上与设备分辨率上的一个逻辑关系 。

  2、不是所有的单位都适合用rpx。

  RPX是会根据不同机型去做自适应调整的,而有时候我们不需要去做这么一个调整。

  比如,对于一些个文字介绍,使用RPX后,小屏幕看起来就完全不可控,显示效果上看着比较小,甚至出现看不清楚的情况,还有一些标题的情况,可能我们在任何机型上想要看到的就是一个加粗定大的效果。这种情况下,其实我觉得我们还是可以使用PX作为单位来控制比较适合一些。

  三、生命周期

  小程序也有生命周期,其实整个开发流程和前端框架React/vue等都类似,所以,这个我对比着来看一下小程序中的生命同期的概念。

  对于那些对外暴露的方法,onLoad/onShow/onReady都好理解。在页面初始化数据的处理方式上有一点需要注意的地方:

  1、在React框架

  实际上跑完willmount之后会产生render,然后在执行didmount,如果在didmount中如果有数据发生变化,使用setState处理变化后,再去执行render。

  在willmount中我们可以使用this.state.xxx来初始化变量的值。

  2、小程序架构

  然而,在小程序的生命周期内,我们是否可以在onLoad中使用this.data.xxx来初始化变量呢?

  答案是不行的,可能之前的版本是可以的,查了一下小程序文档。

  四、template

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

  模板的使用非常简单,文档中的说的很清楚,那么关于这个清楚的描述,我对模板有两点认识:

  1、区别于脚本引入可以使用绝对路径

  脚本的引入是只能使用相对地址的,而模板的引入可以使用绝对路径。

  2、模板化不是模块化

  有没有发现在模板文件中其实少了一个文件,shipin-item-template.js,对,这里是不能加这个脚本文件的,所以从业务角度上来说,无法将逻辑单独出来。因此,小程序时原模板只是一个模板不是一个模块。

  五、播放器插件

  小程序插件功能是前端不久开放出来的,对于它的认识谈一下申请流程。


在线咨询客服>>

本文标签: 小程序开发

我们能做什么

致力于互联网品牌建设与网络营销,专业领域包括网站建设、 电子商务、移动互联网应用、系统平台开发,等服务为不同 类型的客户提供良好的互联网应用定制解决方案,帮助客户 在新的全球化互联网环境中保持优势。

我们的优势

  • 10年专业互联网服务经验
  • 时刻全新技术领先研发能力
  • 成都专业建站团队
  • 具有完备的项目管理
  • 资深行业分析策划
  • 完善的售后服务体系
  • B2C营销型网站建设领先者
  • 深厚的网络运营经验
  • 先前沿视觉设计、研发能力

关于创企科技

创企科技提供网站建设开发(含APP)、品牌咨询策划、 整合营销推广等互联网全价值链一体化服务。核心团队 由互联网专业人士和营销专业人士构成,具有10年系统 设计开发经验,6年整合营销实际操盘经验。

相关推荐

请填写您的项目需求给我们

请认真填写需求信息,我们会在24小时内与您取得联系

* * *

*

提交