小程序常用组件－视图容器

本系列主要对小程序常用的组件做一个总结，方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性，在每个组件中代表的意义和数据类型都是一样的。

容器组件：内部能嵌套任何标签。常用的视图容器有： view , scroll-view , swiper

<view/> 是一个块级容器组件，任何一种复杂的布局都可以嵌套在 <view/> 组件内，并在 wxss 中设置相关样式。

<view/> 除了上述组件共有的属性外，还包含一组关于点击行为的属性。

在布局中，需要容器具有可滑动的功能，且能监听滚动、触顶、触底等事件，就需要 <scroll-view/> 组件， <scroll-view/> 在 <view/> 组件上添加滚动相关的属性，通过这些属性，可以响应滚动相关事件。

注意:

<textarea/> , <video/> , <map/> , <canvas/> 不能嵌套在 <scroll-view/> 中使用

利用 swiper 组件，可以实现轮播图，滑动页面，预览等，一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成，不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/> 标签，放置其它的标签会被删除，其中， <swiper-item/> 中能放置任何标签，高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/> 的属性如下：

一、小程序和APP有什么区别

商机，我觉得小程序或是APP都需要一个好的点子+超强的执行力+运气，但是小程序在微信中更易传播、用户进入门槛更低。

只要小程序有意思、有新意很有可能能获取井喷式的用户增长，比如之前的朋友印象、工具类的传图识字等等。

区别的话主要是：

APP：可无限拓展，较高的自由度，适用于一些功能复杂、对交互、设计有要求的应用，用户可更加方便的长期使用

微信小程序：触手可及，用完即走，开发较为简单，但必须依赖于微信很难进行扩展延伸，即功能受限于微信提供的接口，适用于功能单一、低频的应用

如果细分的话也可以从以下几点来说

1、起源

APP：全称为移动应用程序（mobile application），是设计给只能手机、平板电脑等设备运行的一种应用程序，目前主流的移动设备 *** 作系统为Android和iOS，距离2018年发布已超过十年。

微信小程序：是一种不需要下载安装即可使用的应用，用户通过微信扫一扫或搜一搜即可打开，2017年1月正式上线。

2、用户群体

APP：面对所有智能手机用户，2017年智能手机用户为26亿。

微信小程序：面对所有微信用户，微信日活超过8亿。

3、使用

APP：固定在桌面上，随时可用

微信小程序：按照最近使用时间倒序排列，使用时需进行扫码/查找

4、下载

APP：需要从应用商店下载所对应的安装包，才可使用

微信小程序：通过微信扫描二维码/扫面小程序码/搜索即可进入小程序直接使用

5、功能

APP：可实现较为完整的功能

微信小程序：因受限于平台仅可实现部分功能，一般小程序功能都较为单一

6、适配

APP：需要针对不同手机进行适配

微信小程序：一次开发可适配所有手机

7、开发周期

APP：开发成本高，开发周期较长

微信小程序：开发成本低，平台已提供较多的接口供使用，开发周期短

8、市场

APP：中国2017年上线APP为500万左右

微信小程序：上线小程序数量58万

二，小程序是如何做出来的，

下面我们来看看小程序如何制作。

方法1、微信官方简易教程

我们先来看看微信官网给出的简易教程。

起步基础，注册小程序帐号之后，需要安装开发工具，然后在官方开发工具里面输入代码制作。

基础代码构成：

JSON 配置：

我们可以看到在项目的根目录有一个 appjson 和 projectconfigjson，此外在 pages/logs 目录下还有一个 logsjson，我们依次来说明一下他们的用途。小程序配置 appjson，appjson 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

WXML 模板：

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

WXSS 样式：

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边 appjson, pagejson 的概念相同，你可以写一个 appwxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 pagewxss 仅对当前页面生效。此外 WXSS 仅支持部分 CSS 选择器

JS 交互逻辑：

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的 *** 作。

嗯，上面是官方定义的“简易教程”基础中一小部分，对的，简易教程，“简易”。。。介绍到这里我已经感觉不到所谓的“简易”二字了。

做完基础还有更高级篇等着你，框架，组件，API，工具。这几个词看着简单，展开的内容足够写几本教科书了。

第二种方法 第三方平台开发小程序

官方教程定义是否简易我们就不做文章解析了，对于一个商家和企业，我做个小程序还需要了解如此多的代码知识。或者有人说，我可以请个程序猿和设计狮，可以，土豪请随意，但是一个程序猿也需要花时间去敲代码，设计。。。这一整套制作下来，聪明的人少则一两个月，多着半年，甚至几年都没学会的。

在目前竞争如此激烈的社会，我们企业和商家讲究的都是时间就是金钱，同行竞争，抢占先机。你还会愿意花这么多时间去学习，敲代码，甚至请人提高成本吗？我想你们的回答都是，否。

那么那有没有办法可以让我们轻松且快速地制作小程序呢？

当然有！

我们只需要用到「速成应用」小程序可视化制作工具，马上就可以制作出好看的多功能的全行业的小程序，轻松应对各行各业的应用场景。

下面我们看看如何无需代码基础，轻轻松松制作小程序，教你搞定小程序制作！

小程序可视化制作工具的装修界面，可以清晰的看到左边有“页面、组件、模块、模版”等功能。中间是可视化设计界面，右边是设置。

1、组件

组件功能里面可以添加文字、、视频、文章和和商品列表等元素，都可以自定义样式，大小，边框、背景、颜色、阴影，圆角，透明度效果等等功能，还有幻灯轮播效果。

2、模块

模块库里有适应全行业场景现成的组件模块，幻灯轮播类、导航栏目类、商品展示类、图文展示类、纯文字类、创意图文类、元素图标类、商品列表，精美标题类等等，用户可以一键添加模块布局页面，组件内容均可自定义，无需重新设计排版，模块组件多，适应性高，拖一拖拽一拽，即可完成，自由组合搭配，真正做到千人千店。

3、模板

模板库里有适应全行业场景现成的模板，用户可以一键添加使用布局页面，模板上的内容均可自定义，都可重新设计排版自定义，模板多，适应性高，一键生成，制作小程序就是，快人一步。

如果使用模板功能，一键生成制作使用，花点就制作一个小程序了，是不是很方便。

最后，我想说的是，用对一个工具，选对一种方法，远远比重复的 *** 作来得高效

1、直接打开微信公众平台以后，点击立即注册跳转。

2、下一步，需要选择服务号进入。

3、这个时候，继续点击快速注册并认证小程序。

4、如果没问题，就确定服务类目和上传文件。

5、通过填写相关信息，选择确认注册。

6、在d出的页面那里，点击新增商品。

7、修改其中的对象，从而绑定小程序。

8、等完成上述 *** 作，选择提交版本。

9、这样一来会看到对应结果，即可实现制作了。

现在做小程序难的。

对于不懂技术的商家来说，最好的方式就是找一些小程序的开发者，让代理开发公司帮助自己开发。很多开发者通过网络上选择一些小程序开发工具，自己摸索开发小程序。给大家总结一些微信小程序制作方法。

第一步，在微信公众平台上，需要提前申请一个小程序账号，如果之前曾经认证过微信公众号，就不需要再缴纳300元的微信小程序认证费用。用户需要注意的是如果自己所开发的小程序不需要有支付功能，就不需要进行微信认证。

第二步，寻找一个比较好的小程序第三方开发平台，比如当下不少商家会选择霸界科技，在该平台可以为用户提供多种类型的小程序模板。商家可以根据自己的行业选择相应的模板，也可以自己新建一个模板，在模板里面有相应的组件。

通过 *** 作这些组件来制作小程序。用户首先要填入正确的appid，然后根据自己的行业来选择相应的小程序类型。

第三步，在网络中需要下载微信开发者工具，微信官方平台推出了开发者工具，毕竟是官方推出来的工具更加的实用，不过技术人员千万不要奢求利用微信开发者工具开发出多么精美的小程序，这是满足基本的小程序开发。

在下载了开发者工具之后需要正确的填写自己的appid，然后将打包后解压出来的文件进行上传。

对于图表这块的开发，使用一些流行的图表库可以大大提高我们的开发效率，目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异，我印象比较深刻的是Hcharts是支持多坐标轴的，Echarts好像是不支持的，但是对于小程序的选择我们选择的是阿里的AntV-f2，因为他明确指出了适合小程序开发，而且AntV-f2除了不支持一些document，其他的大部分功能都是支持的，我们就没有再考虑其他的库，但是官方并没有太多关于小程序的具体使用文档，我们只能根据js的相关事例翻译成小程序的语法。

钉钉小程序开发工具： >

小程序开发的方式主要分为两种，一种是定制开发，另一种是通过第三方平台制作小程序。

定制开发与APP开发相似，需要经过需求评估、确定产品原型、UI设计、技术开发、测试修改等步骤。开发周期较长，投入的人力成本、开发成本较高，这种适用于对小程序个性化要求高，拥有专业开发团队，或者有资金实力、有运维团队的大型企业。

那我们可以通过第三方平台制作小程序，相较于定制开发来说，成本比较低、 *** 作也简单，适用于对小程序定制要求不高，没有开发团队、没有技术经验的中小型企业和个体商户。

那我们就以第三方制作来讲述下制作小程序的流程：1、注册小程序；2、选择第三方平台；3、制作微信小程序；4、授权小程序；5、发布小程序、微信审核。

1、注册小程序

1>注册账号

先去公众平台注册一个小程序账号。

使用邮箱激活公众平台账号，完成注册。

商家根据自己的主体类型，完善主体信息和管理员信息。

2>完成认证

企业类型账号可以通过两种方式完成认证：

①用公司的对公账户向腾讯公司打款来验证主体身份；

②通过微信认证验证主体身份，需支付300元认证费。

如果小程序已跟公众号关联，也可以用认证过的公众号复用资质认证小程序。

3>开通支付功能

有些商家在运营小程序时需要进行线上支付，因此此类商家必须开通小程序支付功能。

登录微信公众平台，点击微信支付，按照要求填写基本信息、商户信息和结算用户，确认信息无误后点击提交。

2、选择第三方平台

不需要懂技术懂代码，模板可一键套用，还可自己设计。

3、基于平台制作小程序

4、授权小程序

完成店铺搭建后，将小程序授权给得有店，允许得有店调用微信小程序相关接口权限。在得有店上设置小程序支付方式，微信小程序管理员完成支付认证，小程序授权成功。

5、微信审核

在得有店系统后台点击发布小程序，提交微信审核，审核成功后，小程序上线。

微信说了七个例子，基本都是针对线下实体店的，在小程序的发布会上，张小龙没有做任何展示，只是简单口述了这七个例子：

1 用户来到餐厅，扫店家的二维码，打开店家的小程序就可以排队、点菜了；

2 用户来到汽车站，扫二维码就能打开小程序买票上车；

3 公交小程序，等公交的时候，扫二维码查询下一班车什么时候来；

4 发一个投票小程序到微信群，用户可以看到具体哪些人投了票，因为小程序直接关联了微信账号，不用再填写名字；

5 股票小程序，用户看中某只具体股票、分享给别人，对方能看到“活的数据，是当前我看的信息”（没说具体怎么活）；

6 时钟小程序，在群里会显示出一个动态的时钟，张小龙没有提到为什么会需要分享时钟；

7 线下消费小程序，“比如说在三公里以外有一个士多店（粤语里的便利店），那么你可以看到并立即打开它的小程序，然后买一点什么东西，这是很有可能的”。

总结下来大概是：小程序代替在线下特定场所才会用的应用或者服务号，不用为了吃饭买单去订阅一个服务号了。微信内的预览功能会更强大，变成动态的。相比内容丰富的网页应用，小程序的优势是直接整合微信的功能——姓名、支付、地理位置等。所以微信小程序还是值得期待的。

实体店小程序怎么做？

一、取个好名字。

小程序与公众号一样，名称具有唯一性，谁先注册，谁先使用，后面的人就无法再使用这个名称的了。并且认证后得到的推荐权重也相对靠前。

因此小程序的注册，越早越好。名称不宜太长，最好是与行业的一些高频优质关键词相结合。用户在搜索框寻找服务的时候，最先展示的必然是小程序名称跟搜索结果最接近的小程序。小程序的排名跟名称、描述、上线时间、用户访问量和小程序的综合质量有关。

二、附近的小程序

在附近的小程序中，小程序会自动展现给周边5km内的微信用户。所有上线的小程序都能在此被免费曝光，且一个小程序能添加10个地理位置。也就是说，做一个小程序，相当于给店铺增加10种曝光的机会。

三、通过二维码线下推广

可以让顾客扫小程序码，扫得越多，小程序权重越大，带来的流量会越大。

四、通过好友分享和朋友圈推广

微信小程序支持直接分享给好友，当我们做好了自己的小程序以后，可以直接分享给好友，也可以让好友帮助转发。小程序目前不支持直接分享朋友圈，不过在朋友圈分享小程序二维码，同样支持长按识别打开。

以上就是关于小程序常用组件－视图容器全部的内容，包括:小程序常用组件－视图容器、小程序是怎么做出来的和APP有什么区别、如何制作小程序等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！