uni-app & HBuilderX & 小程序

0.什么是uni-app

uni-APP官网:https://uniapp.dcloud.io/README
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…
查看控制台依旧需要在小程序开发工具

	微信开发者工具	HBuilder
循环	wx:for="{{}}"	v-for
属性	属性="{{}}"	:属性=""
函数	在page里面随意散开	methods
设置data数据	this.setData({变量})	this.变量
url/src	url="{{}}"	:url=""
发送请求	wx.request	uni.request
引入子组件	需要在json配置	iimport