位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 2.9 小程序组件支持
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.8 TypeScript 支持 下一篇: 2.10 WXS

2.9 小程序组件支持

uni-app 支持在 App 和小程序中使用小程序自定义组件。

平台差异说明

image.png

此文档小白教程网要求开发者对各端小程序的自定义组件有一定了解

目录结构

┌─wxcomponents                  微信小程序自定义组件存放目录

   └──custom                   微信小程序自定义组件

        ├─index.js

        ├─index.wxml

        ├─index.json

        └─index.wxss

├─mycomponents                  支付宝小程序自定义组件存放目录

   └──custom                   支付宝小程序自定义组件

        ├─index.js

        ├─index.axml

        ├─index.json

        └─index.wxss

├─swancomponents                百度小程序自定义组件存放目录

   └──custom                   百度小程序自定义组件

        ├─index.js

        ├─index.swan

        ├─index.json

        └─index.wxss

├─pages

  └─index

        └─index.vue

├─static

├─main.js

├─App.vue

├─manifest.json

└─pages.json

使用方式

pages.json 对应页面的 style -> usingComponents 引入组件:

{

    "pages": [

        {

            "path": "index/index",

            "style": {

                "usingComponents": {

                    // #ifdef APP-PLUS || MP-WEIXIN

                     "custom": "/wxcomponents/custom/index"

                    // #endif

                    // #ifdef MP-BAIDU

                     "custom": "/swancomponents/custom/index"

                    // #endif

                    // #ifdef MP-ALIPAY

                     "custom": "/mycomponents/custom/index"

                    // #endif

                }

            }

        }

    ]

}

在页面中使用

<!-- 页面模板 (index.vue) -->

<view>

    <!-- 在页面中对自定义组件进行引用 -->

    <custom name="uni-app"></custom>

</view>

代码示例

小白教程网www.2d5.net

下面以微信小程序官方自定义组件示例

小白教程网www.2d5.net

miniprogram-slide-view 为例演示小程序自定义组件的使用方式。 其他组件使用示例

小白教程网www.2d5.net

GitHubwxcomponents-template 插件市场有一个完整的vant weapp 引用好的示例

小白教程网www.2d5.net

工程,详见
https://ext.dcloud.net.cn/plugin?id=302

目录结构

┌─components

├─wxcomponents

   └──miniprogram-slide-view

        ├─index.js

        ├─index.wxml

        ├─index.json

        └─index.wxss

├─pages

  └─slide-view

        └─slide-view.vue

├─static

├─main.js

├─App.vue

├─manifest.json

└─pages.json

pages.json

{

    "pages": [

        {

            "path": "slide-view/slide-view",

            "style": {

                "navigationBarTitleText": "slide-view",

                "usingComponents": {

                    "slide-view": "/wxcomponents/miniprogram-slide-view/index"

                }

            }

        }

    ]

}

slide-view.vue

<template>

    <view>

        <slide-view width="750" height="110" slide-width="500">

            <view slot="left">

                <image src="/static/file_transfer.jpg"></image>

                <view>

                    <view>文件传输助手</view>

                    <view>7:00 PM</view>

                </view>

            </view>

            <view slot="right">

                <view>标为已读</view>

                <view>删除</view>

            </view>

        </slide-view>

    </view>

</template>

<script>

    export default {}

</script>

<style>

    .slide {

        border-bottom: 1px solid #DEDEDE;

    }

    .l {

        background-color: white;

        height: 110rpx;

        width: 750rpx;

        display: flex;

        flex-direction: row;

    }

    .r {

        height: 110rpx;

        display: flex;

        direction: row;

        text-align: center;

        vertical-align: middle;

        line-height: 110rpx;

    }

    .read {

        background-color: #ccc;

        color: #fff;

        width: 350rpx;

    }

    .delete {

        background-color: red;

        color: #fff;

        width: 150rpx;

    }

    .img {

        width: 90rpx;

        height: 90rpx;

        border-radius: 10rpx;

        margin: 10rpx 15rpx;

    }

    .text {

        display: flex;

        flex-direction: row;

    }

 

    .title {

        margin-top: 15rpx;

        font-size: 33rpx;

    }

    .time {

        margin-top: 15rpx;

        color: #ccc;

        font-size: 25rpx;

        margin-left: 330rpx;

    }

</style>

注意事项

n  小程序组件需要放在项目特殊文件夹 wxcomponents(或 mycomponentsswancomponents)。HBuilderX 建立的工程 wxcomponents 文件夹在 项目根目录下。vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。可以在 vue.config.js 中自定义其他目录。

n  当需要在 vue 组件中使用小程序组件时,注意在 pages.json globalStyle 中配置 usingComponents,而不是页面级配置。

n  注意数据和事件绑定的差异,使用时应按照 vue 的数据和事件绑定方式

属性绑定从 attr="{{ a }}",改为 :attr="a";从 title="复选框{{ item }}" 改为 :title="'复选框' + item"

事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"

阻止事件冒泡 catch:tap="xx" 改为 @tap.native.stop="xx"

wx:if 改为 v-if

wx:for="{{ list }}" wx:key="{{ index }}" 改为`v-for="(item,index) in list"

原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名,比如:this.$emit('left-click') 修改为 this.$emit('leftClick')HBuilderX 1.9.0+ 不再需要修改此项)

详细的小程序转uni-app语法差异可参考文档小白教程网https://ask.dcloud.net.cn/article/35786

【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512


(2)uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059


(3)基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977


(4)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com


上一篇: 2.8 TypeScript 支持 下一篇: 2.10 WXS
毕业设计网             广告联系QQ:45157718(微信同号)