不灭的焱

uni-app实践

uni-app开发叮咚买菜实践笔记

uni-app的开发经历（持续更新）

uni-app开发踩坑集合(会持续更新)

全局组件 定义方式示例：

Vue.component("hello-component", {
    props: ["message"],
    template: "<div ><h1>组件定义之全局组件</h1><h4>{{message}}</h4></div>"
});

1. require：node 和 es6 都支持的引入
2. export / import：只有es6 支持的导出引入
3. module.exports / exports：只有 node 支持的导出

目录结构：

|——common 公共文件（如 js，css）
|——components 组件库
|——pages 业务页面文件存放的目录
|　　 |——index
|　　　　　 | index.vue index页面
|——static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
|——main.js Vue初始化入口文件
|——App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
|——manifest.json 配置应用名称、appid, logo, 版本等打包信息
|——page.json 配置页面路由、导航条、选项卡等页面类信息

组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。 本文就介绍 HTML 组件的基础知识：自定义元素（custom elements）。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

高度自适应方法 layer.iframeAuto(index) 能自适应增加iframe弹框高度，却不能自适应减少高度，查看github库开源代码：

https://github.com/sentsin/layer/blob/master/src/layer.js

// iframe层自适应宽高
layer.iframeAuto = function(index) {
    if (!index) return;
    var heg = layer.getChildFrame('html', index).outerHeight(); // 改用 'body'元素高度
    var layero = $('#'+ doms[0] + index);
    ......
    ......
}

Layui 内置方法：layer.getFrameIndex(获取特定iframe层的索引）

此方法一般用于在iframe页关闭自身时用到：

// 假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
parent.layer.close(index); // 再执行关闭    

Vue.js收藏