uniapp开发小程序介绍

手可摘棉花
1,178 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

简介

今天来介绍uniapp开发小程序有哪些便捷的地方,一开始没用uniapp之前,写小程序的时候一直在微信开发者工具里面写,那时用跟之前web端开发h5开发的时候页面布局有区别的,标签不一样了,body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...标签明显少了很多,还有就是在里面布局的时候,效率有点低,比如你写view之后没办法快捷键的写,以前写div>ul>li*5>a直接快捷方式很快布局,这这里有点慢.

uniapp开发小程序介绍

1. uniapp开发小程序比其他小程序框架或原生小程序开发更有优势

  1. uni-app无需追随微信升级，可不受限在条件编译里使用wx的现在或未来的所有api
  2. uni-app的性能比一般人手写的微信原生代码性能更高。就像vue操作比一般人写js操作dom性能更高一样。底层自动diff差量更新数据，比手动setData性能更高。评测数据见下文
  3. uni-app是纯vue语法，不必另学一种dsl。开发不同项目时，思维不用切换
  4. uni-app的组件、模板非常丰富，插件市场数千款插件。如富文本解析、图表、自定义下拉刷新等组件，uni-app版插件性能均超过了wxparse、wx-echart等微信小程序组件
  5. HBuilderX比微信工具更强大，开发效率更高。哪怕使用vscode等工具，由于这些工具对vue的支持强于对wxml的支持，所以开发效果也会更高
  6. 微信原生开发对webpack、预编译语言、工程流程管理很多功能都不支持，大公司很少用微信原生开发，都是在用框架来提升开发效率
  7. uni-app支持双向数据绑定、vuex状态管理，比小程序原生开发方便的多
  8. 迟早会有多端需求，使用uni-app再无后续顾虑
  9. uni-app并非仅用于做跨端的，只用uni-app做小程序、只做H5、只做App的，案例是一样多的，详见：uniapp.dcloud.io/case (opens…关于uni-app和微信开发的详细比较评测，参考：ask.dcloud.net.cn/article/364…

2. 使用 Vue.js 的注意

  • data 属性必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据
//正确用法，使用函数返回对象
data() {
	return {
		title: 'Hello'
	}
}
//错误写法，会导致再次打开页面时，显示上次数据
data: {
	title: 'Hello'
}
  • 在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：
<view id="item-{{id}}"></view>

需修改为：

<view v-bind:id="'item-' + id "></view>

3. Css注意

  • 虽然大部分css样式在微信小程序和app中都可以支持，但推荐使用flex布局模型，这种布局更灵活高效且支持更多平台(比如nvue、快应用只支持flex布局)
  • 单位方面，uni-app默认为rpx。
  • 引用方式: 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

4. 引用静态资源

  1. 模板内引入静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
  1. css 引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径

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

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。

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

Tips

  • 引入字体图标请参考，字体图标
  • @开头的绝对路径以及相对路径会经过 base64 转换规则校验
  • 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
  • h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
  • 其余平台不会转 base64

js 文件引入

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

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

注意

  • js 文件不支持使用/开头的方式引入

5. uniapp字体图标引用

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

  1. 去图标官网下载自己需要的字体图标，下载下来之后，在static目录下面新建fonts,放进去刚下载下来的文件，解压复制文件夹里面的相关文件，把这些文件放到你新建的fonts里面；

  2. 然后在App.vue文件中的style 引入css路径;

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

  1. 修改iconfont.css文件中的引入路径，在改样式中修改@font-face中的路径，比如在所有url里面的iconfont的前面添加路径~@/static/font/

  2. 在任意的页面中使用方式为：

<view class="iconfont icon-XXX"></view>

总结

本篇文章主要讲解了uniapp写小程序的一些优势,还有uniapp写小程序的介绍跟使用方法,使用的时候需要注意哪些的问题,引用方式如何,怎么引用外部图标等等,感谢观看~

avatar
文章
阅读
粉丝