uni-app & HBuilderX & 小程序

0.什么是uni-app

uni-APP官网:

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1.uni-app工作原理

举例:平时我们写的 vue 都并非直接传输给浏览器,因为浏览器看不懂,通常会经过编译后翻译成HTML格式,再由浏览器渲染.

uni-app 的工作原理就是充当这个编译,将一套代码翻译成不同语言.

2.HBuilderX

HBuilderX 是可视化窗口,类似于vscode等编译器

2.1创建项目

2.2项目目录分类

2.3运行小程序

注意:当重新打开时要重新运行小程序,否则数据更新不了

方法一 :打开后在 HBuilderX 更新的内容会自动更新到小程序

当然,也可以尝试在其他平台运行

方法二 :在微信小程序开发工具点击设置>安全>打开端口

2.4小程序的配置

2.5配置文件

uni-app 中的配置文件放在 pages-json ,其中 peges 项功能变更为页面设置, globalStyle 等同小程序开发工具的 window ,是做全局样式配置的.

2.6配置less

方法一:可以去官网>插件市场找,不过需要登录才能下.

方法二:

1. 复制如下代码创建文件名为 package.json
2. 在 HBuilderX 文件夹> plugins

   创建一个叫 compile-less 的文件夹,把 package.json 放进该文件夹

3. cmd 调出控制台输入: npm i

{
	"name": "less",
	"id": "compile-less",
	"displayName": "less编译",
	"version": "1.0.4",
	"engines": {
		"HBuilderX": "^1.0.0"
	},
	"external": {
		"type": "node",
		"programPath": "${pluginPath}",
		"executable": "/node_modules/.bin/lessc",
		"programName": "less",
		"commands": [
			{
				"id": "LESS_COMPILE",
				"name": "编译less",
				"command": [
					"${programPath}",
					"${file}",
					"${fileBasename}.css"
				],
				"extensions": "less",
				"key": "",
				"showInParentMenu": false,
				"onDidSaveExecution": false
			}
		]
	},
	"dependencies": {
		"less": "3.9.0"
	},
	"extensionDependencies": [
		"npm"
	],
	"description": "编译less为css。uni-app编译或对文件右键-外部命令编译时使用"
}

2.7uni-app编写注意事项

相当于普通JS开发,body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image…

查看控制台依旧需要在小程序开发工具