一起养成写作习惯吧！这是我参加“挖金日计划·4月发文挑战”的第二天，点击这里查看活动详情。

Hi！大家好！我是手课斋面花，一名前端开发者。很高兴在这里分享文章，期待大家的点赞和关注。

介绍

今天就来介绍一下开发小程序的便捷性。在开始使用之前，我是在微信开发者工具中编写小程序的，页面布局和网页端h5开发不一样，标签也不同，body的元素选择器改成了page，同样的div，ul，li等都改成了view，span，font改成了text，a改成了，img改成了...标签明显少了。另外在里面布局的时候，效率有点低，比如写完view就不能用快捷键写了，以前是直接写div>ul>li*5>a，用快捷键快速布局，这里就有点慢了。

开发小程序入门 1.小程序开发比其他小程序框架或者原生小程序开发更有优势 Uni-app不需要跟随微信升级，可以不受条件编译限制使用。wx-app现在或者未来所有版本，都比普通人写的微信原生代码性能高。就像vue的操作比普通人写的js操作性能高一样。底层自动更新diff差异的数据，比手动性能高。评测数据如下 Uni-app是纯vue语法，不需要再学习另外一种dsl，开发不同项目的时候，不需要切换思维。Uni-app有非常丰富的组件和模板，插件市场有上千种插件。比如富文本解析、图表、自定义下拉刷新等组件，uni-app版本插件的性能超过wx-和其他微信小程序组件。 比微信工具功能强大，开发效率更高。即使使用 之类的工具，开发效果也会更高，因为这些工具对vue的支持多于wxml。微信原生开发不支持预编译语言、工程流程管理等很多功能，大公司很少用微信原生开发，都是用框架来提高开发效率。uni-app支持双向数据绑定和vuex状态管理，比原生开发小程序方便多了。早晚会有多端的需求，用uni-app就没后续的顾虑了。uni-app不只是用来跨终端开发，小程序、H5、App使用uni-app的案例一样多，详情见：..io/case(...uni-app与微信开发详细对​​比评测参考：//364...2.使用Vue.js注意事项

//正确用法，使用函数返回对象 data() { return { title: 'Hello' } } //错误写法，会导致再次打开页面时，显示上次数据 data: { title: 'Hello' }

id="item-{{id}}">

需要修改为：

id="'item-' + id ">

3. CSS 注释

示例代码：

<style> @import "../../common/uni.css"; .uni-card { box-shadow: none; } style>

4.在引用的静态资源模板中引入静态资源

引入静态资源的时候，比如标签的src属性，可以使用相对路径或者绝对路径，格式如下：

<image class="logo" src="/static/logo.png">image> <image class="logo" src="@/static/logo.png">image> <image class="logo" src="../../static/logo.png">image>

css 导入静态资源

在将 CSS 文件导入 CSS 文件或标签时（scss 和 less 文件也一样），可以使用相对路径，也可以使用绝对路径

/* 绝对路径 */ @import url('/common/uni.css'); @import url('@/common/uni.css'); /* 相对路径 */ @import url('../../common/uni.css');

css文件或标签中引用的图片路径可以使用相对路径，也可以使用绝对路径，需要注意的是，部分小程序css文件不允许引用本地文件（见注意事项）。

/* 绝对路径 */ background-image: url(/static/logo.png); background-image: url(@/static/logo.png); /* 相对路径 */ background-image: url(../../static/logo.png);

尖端

js文件引入

在js文件或者标签（包括等）中引入js文件时，可以使用相对路径和绝对路径，格式如下：

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录 import add from '@/common/add.js'; // 相对路径 import add from '../../common/add.js';

注意

5. 字体图标参考

uni项目中字体图标的使用流程：

去图标官网下载你需要的字体图标，下载之后在目录下新建一个目录，把下载的文件放进去，解压并复制文件夹中的相关文件，将这些文件放到你的新目录中；

然后在App.vue文件中导入css路径；

@import './static/fonts/iconfont.css'

修改.css文件中的引入路径，以及修改样式中@font-face中的路径，比如在所有URL前面添加路径~@//font/

要在任何页面上使用它：

class="iconfont icon-XXX">

总结

本文主要讲解了编写小程序的一些优势，以及编写小程序的介绍和使用，使用时需要注意哪些问题，如何引用，如何引用外部图标等，谢谢观看~