html如何正确引用控件

将插件下载下来后，你可以在页面里直接引入插件，比如：

<link href="插件css"/>

<script src="插件js"></script>

2. 也可以用node包去安装，然后用import 去引用

比如在vue里引入引入swiper:

安装：npm install vue-awesome-swiper --save

在main.js里全局注册：

Vue.use(VueAwesomeSwiper)

引入其css:

require('swiper/dist/css/swiper.css')

在模板里引入js：

import { swiper, swiperSlide } from 'vue-awesome-swiper'

在模板里注册组件：

components: {

swiper,

swiperSlide

}

这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。底部标签底部标签是一个tabBar。实现比较简单，只需要简单配置一下即可。 app.json

{

"pages":[

"pages/function/function",

"pages/pay/pay",

"pages/account/account",

"pages/index/index",

"pages/logs/logs"

],

"tabBar":{

"color": "#464a56",

"selectedColor": "#6595e9",

"backgroundColor": "#FFFFFF",

"borderStyle": "white",

"list": [{

"pagePath": "pages/function/function",

"text": "功能",

"iconPath": "images/tab_function_default.png",

"selectedIconPath": "images/tab_function_sel.png"

},{

"pagePath": "pages/pay/pay",

"text": "收款",

"iconPath": "images/tab_consume_default.png",

"selectedIconPath": "images/tab_consume_sel.png"

},{

"pagePath": "pages/account/account",

"text": "账户",

"iconPath": "images/tab_account_default.png",

"selectedIconPath": "images/tab_account_sel.png"

}]

},

"window":{

"navigationBarBackgroundColor": "#6595e9",

"navigationBarTextStyle":"white",

"navigationBarTitleText": "V50",

"backgroundColor": "#eeeeee",

"backgroundTextStyle":"light"

}

}

2.值得注意的地方，就是 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。

3.页面标题

这个标题如何实现？

4.我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了，我们只需要在function.json中配置页面标题即可

{

"navigationBarTitleText": "功能"

}

5.轮播图

接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}" class="slide-image" />

</swiper-item>

</block>

</swiper>

function.js

//function.js

Page({

data: {

indicatorDots: true,

autoplay: true,

interval: 5000,

duration: 1000,

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

],

},

})

方法2

但很多人不知道的是，其实微信小程序是可以借助一款简单实用的制作工具「即速应用」生成的。整个过程无需编程无需代码，通过简单的拖拽组件即可生成微信小程序，非常方便。下面分享一下微信小程序开发教程入门篇，让新手们迅速掌握微信小程序开发的基本方法。

2.登录即速应用官网，点击上方首页菜单的“立即制作”，即可开始进行制作。

选择“空白模板”，进行自由创作。如果想节省时间，也可以选择主题模板进行快速制作。

3.进入制作界面后，可以看到页面分组和页面属性。点击“组件库”，开始搭建页面。

4.根据自己的需求选择组件以搭建页面，每个组件的文案和图片都是可以自己编辑的。

5.即速应用有很多可供选用的组件。比如用于布局的双栏组件、面板组件、顶部导航组件和底部导航组件。

还有一些可以实现更多复杂功能的高级组件，比如动态列表组件、动态容器组件、自定义表单组件、个人中心组件。

6.把每个页面都编辑好，并做好页面之间的跳转，确保逻辑无误。全部做好之后，点击右上角的“保存”，然后点击“发布”。若是制作过程中想要找回之前的版本，只需要去历史记录中回复既可。

7.跳转页面后，再次点击“发布”，即可生成。

8.点击“小程序打包”，生成小程序的代码。打包下载之后，就可以直接上传到微信官方后台的开发者工具里，即可完美对接小程序。技术人员还可以根据自己的需求修改，在原有代码的基础上进行二次开发。

Copy-Paste 是一件非常有效的开发方式，但是它们一点儿也不适合维护——为了改一个拼写错误，要去修改代码中的七八个文件，打人的心都有了。

如果万一我们是要替换这七八个文件的相应代码，那么就会更加地痛苦。在后端里，我们只需要修改相应的 Java、Go、JavaScript、Python 等语言相关文件的代码。而在前端我们需要修改 HTML/JavaScript/CSS 文件，而哪怕使用的 React 这样的框架里，我们也要修改一个文件的多个地方。

于是乎，作为一个专业的程序员，我们都在不断地寻找方式来复用代码（PS：复制/粘贴从本质上也是一种复用）。

经验总结的复用

经验总结型复用，指的是结合组织和项目的经验，提取出其中的共同部分，以便于在其它项目中继续使用。事实上，所有类型的复用都是经验型复用。因此，这里的经验总结型复用，专指于用在组织内部的复用。从我的认识来看，有以下四类：

脚手架

脚手架是一种快速创建新应用的方式。在脚手架里，我们会总结出过往经验中的模式、代码，将这些模式和代码融入我们其中。其中特色就是结合常用的各种框架，并将它们结合到一起，如后端的：Spring Boot + Spring Eureka + Feign + Zuul 等，如前端的 React + Redux + React Router 等（PS：Angular 就没这么复杂）。

市面上的主流框架，本身是提供了相应的脚手架功能。基于此，脚手架可以分为两类：

两者都有各自的优缺点。框架官方的脚手架缺少一些团队、组织特定的因素。而自制的脚手架则需要团队长期维护。不过，出于种种原因（诸如 KPI），我们都会维护自己的脚手架，你说呢？

组件库（客户端）

组件库，对于每个 Web 项目来说，都是必不可少的元素。它适用于客户端开发的 UI 复用。组件库本身分为三个层级：基础 UI 组件、复合组件、业务组件 。

一般而言，我们会使用第三方的基础 UI 组件库。在那的基础之上，封装自己的业务组件库。又或者是，再对基础 UI 组件库进行二次封装，以降低对第三方组件库的依赖，让其变成可替换的组件库。

模式库

模式库其本质仍然是一个代码集，它将我们常用的代码提取出一个公共的类库中。按分类上来说，组件库也是模式库的一种。为了方便于服务端与客户端开发区别，我将组件库独立出来。

模式库，是出于共用的目的而提取出来的。在不同的项目中，它的表现形式略有差异：

两种方式也是各有优缺点。前者维护容易出错，后者更新不方便。

模板和模板应用

组件库和模板，实质上是设计系统的一部分。设计系统是一组相互关联的设计模式与共同实践的，以连贯组织来达成数字产品的目的。它包含了以下的五部分：

而模板应用，则是在模板的基础上，进一步地整合而成，用于帮助开发人员快速的构建某一类型的应用。对应于其它类型的应用而言，则要判断是否会出现相似的应用。

工具

上述的四种方式，是比较常见的方式。而随着，我们项目数量的变多，开发人员数量的膨胀，它们开始变得麻烦。我们便需要编写一些工具，以节省大量的人力成本。

CLI

这里的 CLI 是指自制的 CLI，它与我们编写的一系列自动化代码工具相互配合，形成自己的解决方案。

其交互诸如于：

我们便可以将把配置、组件安装等一系列的工作自动化。

Schematics

Schematics 来自于 Angular 团队，其本质上也是 CLI 的一种，只是它相对于 CLI 来说，编程起来更加的简单。它将我们在编程 CLI 过程中的一些通用模式，整合出来融入了代码中。换句话来说，它相当于是前端工具中的 Angular、React——只需要编写业务逻辑，而不需要关注于基础架构。

它是现代 Web 的工作流程工具； 它可以将修改应用于您的项目，例如创建新组件或更新代码以修复依赖项中的重大变更（PS：有点类似于后端数据库脚本的味道）。还可以向现有项目添加新的配置选项或框架。

编程器插件

编程器插件，是一个非常有意思的思路。我们可以编写一个编辑器插件，在插件中加入我们常见的代码、模式和模板等。如在 VS Code 中，我们只需要创建对应的：

就此可以用于代码生成和智能感知。对于一个框架来说，我们只需要定制好框架相应的组件、模式代码，就可以复用它们。

设计系统与代码生成

当我们有了一个成体系的设计系统，就可以使用诸如 Storybook 这样的框架来优化组件的使用。它可以让我们在查看组件文档的同时，配置上相应的组件参数，最后我们只需要复制结果代码，到我们的工程中使用即可。

其与一般的组件库使用相比，更加的轻便，易于使用。

下一步，我们就是等 AI 来生成代码了。对于拥有设计系统的项目而言，我们可以直接通过类似于 Sketch2Code 的工具，直接将我们的设计转换为代码。但是，实质上这是一种更复杂的模式。对于拥有设计系统的项目来说，我们可以将设计转换为元数据。

结论

降低程序员的代码量，就是效率的提升。

---