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
方法一:可以去官网>插件市场找,不过需要登录才能下.
方法二:
- 复制如下代码创建文件名为
package.json
- 在
HBuilderX
文件夹>plugins
>创建一个叫compile-less
的文件夹,把package.json
放进该文件夹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 |