uniapp 问题指北

1. HBuilderX创建项目 与 vue-cli创建项目 采取哪种？

个人认为，采取vue-cli 更好。可以通过vue-cli创建，然后利用HBuilderX作为开发工具。

2. 如何利用hBuilerX让微信小程序跑起来？（其它同理）

hBuilerX - 偏好设置 - 运行配置 - 小程序运行配置 - 微信小程序

3. 如何测试app端？

考虑使用夜神模拟器

3. 如何在文件中自由使用uni-ui ？

@dcloudio/uni-ui是在node_modules中的组件

a. 在pages.json 通过如下配置 easycom，不用import引入，也不需要在components内注册组件。template里就可以直接用.

b. 当然也可以采取把相关组件放到src下的components（需符合 components/组件名称/组件名称.vue 的路径格式），但是不如直接采取easycom方便

下面是easycom方法

"easycom": {
    "autoscan": true,
    "custom": {
        // uni-ui 规则如下配置
        "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
},

可以在文件中直接使用了

<uni-calendar />
<uni-list />
<uni-easyinput />

easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数如下：

属性	描述
autoscan	是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
custom	以正则方式自定义组件匹配规则。如果autoscan不能满足需求，可以使用custom自定义匹配规则

需注意下该地方，如果开启了autoscan会优先使用components/组件名称/组件名称.vue ,如果没有的话，再去使用custom定义的规范的

详细资料查看：easycom

4. 如何跨端兼容？

   使用条件判断，区分平台写代码, 注意使用的方式

template中

 
<!--  #ifdef  APP-PLUS || H5 -->
<uni-easyinput />
<!--  #endif -->

js 中

// #ifdef APP-PLUS || H5
uni.startPullDownRefresh()
console.log('APP-PLUS startPullDownRefresh')
// #endif

style中

注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，

必须使用 /* 判断条件 */ 的写法。

正确写法：
.index {
    /* #ifdef MP-WEIXIN ||  H5*/
        padding-top: 90px;
    /*  #endif  */
}
错误写法：
.index {
    // #ifdef MP-WEIXIN ||  H5
    padding-top: 90px;
    // #endif
}

pages.json 中

// 只有运行至 App 时才会编译进去。

// #ifdef APP-PLUS
    {
        "path": "pages/search/search",
        "style": {
            "navigationBarTitleText": "",
            "enablePullDownRefresh": false
        }

    },
// #endif

参看资料

5