uniapp
目录结构介绍：
build
项目构建(webpack)相关代码
config
配置目录，包括端口号等。我们初学可以使用默认的。
node_modules
npm 加载的项目依赖模块
src
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets:
放置一些图片，如logo等。
components:
目录里面放了一个组件文件，可以不用。
App.vue:
项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js:
项目的核心文件。
static
静态资源目录，如图片、字体等。
test
初始测试目录，可删除
.xxxx文件
这些是一些配置文件，包括语法配置，git配置等。
index.html
首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json
项目配置文件。
README.md
项目的说明文档，markdown 格式
在我做过的一个uniapp的小程序的项目中，配置页面路由的文件在根目录的pages.json 文件中。
在这里配置路由文件之后，再就能访问新配置的页面了。
注册组件为全局组件的两种方式
有两种方法可以注册为全局组件
第一种是 easycom组件模式
官方描述：https://uniapp.dcloud.io/collocation/pages?id=easycom
-
将组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。可以不用引用、注册，直接在页面中使用。
-
pages.json中要设置autoscan为true
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"autoscan":true
}
}
- 然后就可以直接在页面中使用了
第二种就是传统的 安装、引用、注册，三个步骤
-
新建 .vue 文件，可以放在自定义文件夹下，我这里新建了一个global.vue
-
在 main.js 中 引用、注册
import global from "@/components/global.vue"
Vueponent('global', global)
- 在需要组件的地方直接使用即可
<template>
<view class="content">
<global></global>
</view>
</template>
uniapp页面生命周期[2]
1.onInit
监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad.
2.onLoad
监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）.，参考示例
3. onShow
监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。
4. onShow
监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发。
5.onHide
监听页面隐藏。
6.onUnload
监听页面卸载
7.onResize
监听窗口变化。
8.onPullDownRefresh
监听用户下拉动作，一般用于下拉刷新。
9.onReachBottom
页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
10.onTabItemTap
点击 tab 时触发，参数为Object，具体见下方注意事项
11.onShareAppMessage
用户点击右上角分享
12.onPageScroll
监听页面滚动，参数为Object
13.onNavigationBarButtonTap
监听原生标题栏按钮点击事件，参数为Object
14.onBackPress
15.onNavigationBarSearchInputChanged
16.onNavigationBarSearchInputConfirmed
17.onNavigationBarSearchInputClicked
18.onShareTimeline
监听用户右上角转发到朋友圈
19.onAddToFavorites
监听用户右上角收藏。
HbuilderX 项目的手机调试
使用HbuilderX新建项目可以有很多的模板可以下载。
我们下载好对应的模板之后，可以在插件的基础上做一些二次开发。
当mac 和iphone 使用同一个热点的时候可以直接在手机上访问h5 ，这样就能够直接使用手机调试。
比如使用mac的 ifconfig 命令之后就能够查询到我自己的mac的ip为：
172.20.10.2
那么我使用uniapp 来进行发布在浏览器预览之后，会自动生成一个本地的特定端口的访问地址，比如
http://localhost:8080/#/
http://localhost:8081/#/
这种的，那么手机访问的时候，替换localhost 为mac 的ip地址就可以了。
http://172.20.10.2:8080/#/
http://172.20.10.2:8081/#/
估计同一个wifi也可以，我这里只是试验了mac 和iphone 都使用了同一个热点的这样一种情况。
参考文献：
[1] uniapp 官方文档
[2] uniapp 页面生命周期
更多推荐
【126.1】uniapp 框架的相关开发经验
发布评论