社区 学习 工具库 休闲
搜索
简体中文
首页 > 微信小程序 > 小程序开发 > 艺龙微信小程序框架组件实例代码

艺龙微信小程序框架组件实例代码

高洛峰
发布： 2017-03-16 13:34:36
原创
2041 人浏览过

由于身处于在线旅游行业，对OTA的行业动态都比较关心一些，前阵子研究体验了一下艺龙的微信小程序，虽然有些美中不足，但是小程序的架构组件还是非常好的，所以今天我们就来简单看看艺龙微信小程序框架组件。
首先，我们将艺龙微信小程序的框架组件分为以下四个部分来分析：
1.局部组件
2.独立组件
3.集成组件
4.网络请求
先看三张的动态效果图：
总体而言，其目录结构如下：

[AppleScript] 纯文本查看 复制代码

├── README.MD
├── app.js
├── app.json
├── app.wxss
├── components
├── image
├── pages
├── service
└── utils
    ├── api.js
    ├── cookie.js
    ├── data-center.js
    ├── overwrite.js
    ├── page-events.js
    ├── path.js
    ├── promise.js
    └── service.js
登录后复制

框架使用说明

  • 框架对所有微信原生api进行了一层包装，以便管控和扩展。

[AppleScript] 纯文本查看 复制代码

//index.js
var api = require("./utils/api.js")();
api.login({
    success: function(res) {
        console.log(res);
    }
});
登录后复制
登录后复制

[AppleScript] 纯文本查看 复制代码

//index.js
var api = require("./utils/api.js")();
api.login({
    success: function(res) {
        console.log(res);
    }
});
登录后复制
登录后复制

  • 对于后端接口，框架提供service层进项管理，接口返回一个Promise对象。

[AppleScript] 纯文本查看 复制代码

//demo.js
var Service = require("../utils/service.js");
module.exports = {
    GetTime: Service({
        url: 'https://xxx.xxx.xxx/api/getserverdate/',
        params: [], //参数列表
        method: 'GET',
        noLoading: true,
        mockData: function() { //模拟数据
            return new Date();
        },
        dataTransform: function(data) { //适配处理
            return data;
        }
    })
};
登录后复制

[AppleScript] 纯文本查看 复制代码

//index.js
var service = require('service/demo'); //框架约定，所有的后端接口，要注册到对应的service文件中
var serverDate = service.GetTime( /*service可配置参数列表，这里传入相对应的参数*/ ).then(function(date) {
    that.setData({
        serverDate: date
    });
});
登录后复制

  • 小程序不支持cookie机制，若要兼容现有后端cookie处理（不做改动），可使用框架模拟的cookie机制。

[AppleScript] 纯文本查看 复制代码

//index.js
var COOKIE = require('./cookie.js');
var expire = new Date().getTime() + res.expire * 1000;
COOKIE.set(key, value, expire);
登录后复制

[AppleScript] 纯文本查看 复制代码

//service.js
//...
headers["Cookie"] = Cookie.getAll(); //用户cookie将随http请求发送至服务器
//...
登录后复制

  • Page() 函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等，框架对Page做了重写，这样可以方便的使用扩展能力，使用时仅需将原来的业务代码用包装器包装一下即可。

[AppleScript] 纯文本查看 复制代码

//微信小程序原生页面注册形式
Page({
    data: {},
    onLoad: function() {}
});
//框架重写注册形式
var dirname = 'pages/index',
    overwrite = require('../../utils/overwrite.js');
(function(require, Page) { //重写require、Page
    Page({
        data: {},
        onLoad: function() {}
    });
})(overwrite.require(require, dirname), overwrite.Page);
登录后复制

  • globalData监听，框架支持全局事件监听机制

[AppleScript] 纯文本查看 复制代码

//index.js
var dirname = 'pages/index',
    overwrite = require('../../utils/overwrite.js');
(function(require, Page) {
    //获取应用实例
    var app = getApp();
    var service = require('service/demo');
    Page({
        data: {
            indate: '',
            indateText: ''
        },
        onLoad: function() {
            this.listenerGlobalData('indate', function(indate) {
                this.data.indate = indate
                this.data.indateText = new Date(indate).format('MM-dd')
            }.bind(this));
        }
    })
})(overwrite.require(require, dirname), overwrite.Page);
登录后复制

  • 事件机制，页面间跳转可以传递数据，框架支持页面间传递数据的同时，还可以通过跳转接口返回的事件对象监听自定义事件。

[AppleScript] 纯文本查看 复制代码

//index页面
var event = api.Navigate.go({
    url: '../list/index',
    params: {
        name: 'billy'
    }
});
event.on("listok", function(params) {
    console.log(params);
});
登录后复制

[AppleScript] 纯文本查看 复制代码

//http页面
Page({
    onLoad: function(data) {
        if (data.name === 'billy') {
            this.fireEvent("listok", 'hello ' + data.name);
        }
    }
});
登录后复制

组件使用说明

  • 内置组件

框架重写Page构造方法，内置了一些常用的组件，例如 alert、picker、setLoading，其中 alert 和 setLoading 内部分别封装了原生的 wx.showModal 、wx.showToast，封装使得调用参数结构化，方便业务使用，使用时不用引入页面结构，直接调用即可；picker则需要首先引入到页面中表现层结构，按照配置要求传递配置项。

[AppleScript] 纯文本查看 复制代码

//setLoading
this.setLoading(true);//ture/false
//picker 引入表现层结构
<!--index.wxml-->
<view class="container">
    <view class="userinfo">
        <text class="userinfo-nickname">{{current}}</text>
    </view>
    <include src="../../components/base.wxml" />
</view>
//picker 使用
overwrite.picker({
    content: "选择排序",
    init: this.data.sortIndex,
    data: this.data.sortList,
    bindtap: function(id, index) {
        if (that.data.sort != id) {
            that.setData({
                sortIndex: index,
                current: this.data.sortList[index].text
            });
        }
    },
    bindcancel: function() {
        console.log(&#39;cancel&#39;)
    }
});
//alert
overwrite.alert({
    content: &#39;弹框对话框，参数配置详见文档说明&#39;,
    cancelText: &#39;取消&#39;,
    bindconfirm: function() {
        console.log(&#39;确定&#39;);
    },
    bindcancel: function() {
        console.log(&#39;取消&#39;);
    }
});
登录后复制

  • 独立页面组件

独立页面组件其实就是一个完整的页面单元（js、wxml、wxss组成），使用很简单，通过引入相关js方法，调用打开组件即可（可传递callback用于数据交换处理）。--其实现原理是组件提供的js方法将会打开一个新页面（api.Navigate.go），并通过注册事件的形式交互行为数据

[AppleScript] 纯文本查看 复制代码

//index.js
var dirname = &#39;pages/externalComponent&#39;,
    overwrite = require(&#39;../../utils/overwrite.js&#39;);
require(&#39;../../utils/dateFormat.js&#39;);

(function(require, Page) {
    //获取应用实例
    var app = getApp();
    var CalendarPlugin = require(&#39;components/calendar/index&#39;);
    Page({
        data: {
            date: {
                indate: new Date().format(&#39;yyyy-MM-dd&#39;),
                outdate: new Date(+new Date + 3600000 * 24).format(&#39;yyyy-MM-dd&#39;)
            }
        },
        openCalendar: function() {
            var that = this;
            CalendarPlugin({
                begin: that.data.date.indate,
                end: that.data.date.outdate
            }, function(res) {
                that.data.date.indate = res.start.format(&#39;yyyy-MM-dd&#39;);
                that.data.date.outdate = res.end.format(&#39;yyyy-MM-dd&#39;);
                that.setData({
                    date: that.data.date
                })
            })
        },
        onLoad: function(data) {

        }
    })
})(overwrite.require(require, dirname), overwrite.Page);
登录后复制

  • 页面级组件

框架重写Page构造器，支持构建页面时配置一个或多个页面级组件，所谓页面级组件就是该组件的注册形式和页面一致(支持data数据，onLoad、onReady、onShow生命周期事件，fireEvent、showLoading等页面级方法)，其实现原理是将组件的所有成员方法和成员属性和依附页面进行合并，并解决了重名冲突，使用者不用关系处理细节，只管像注册一个页面一样注册组件。--需要注意的是页面级别组件不可再次使用Page构造方法。

1、引入组件表现层结构

[AppleScript] 纯文本查看 复制代码

<!--index.wxml-->
<view class="container">
    <view class="userinfo">
        <!--当前页面数据-->
    </view>
    <!--引入组件页面结构-->
    <include src="../../components/base.wxml" />
</view>
登录后复制

2、引入组件样式表

[AppleScript] 纯文本查看 复制代码

/**引入组件样式表**/
@import "filter/index.wxss";
page { background: #f4f4f4; }
登录后复制

3、注册页面时注入组件

[AppleScript] 纯文本查看 复制代码

/**
 * 集成组件dome
 */
var dirname = &#39;pages/internalComponent&#39;,
    overwrite = require(&#39;../../utils/overwrite.js&#39;);
(function(require, Page) {
    /*引入组件js*/
    var filter = require(&#39;./filter/index&#39;);
    Page({
        /**
         * 默认数据
         * @type {Object}
         */
        data: {...},
        onLoad: function(options) {},
    }, [{//注入组件
        component: filter,
        instanceName: &#39;typeFilter&#39;,
        props: {
            style: { top: &#39;44px&#39; }
        },
        events: {
            onChange: &#39;filterChangedCallBack&#39;,
            onOpen: &#39;filterOpenedCallBack&#39;,
            onClose: &#39;filterClosedCallBack&#39;
        }
    }, {
        component: filter,
        instanceName: &#39;categoryFilter&#39;,
        props: {
            style: { top: &#39;44px&#39; }
        },
        events: {
            onChange: &#39;filterChangedCallBack&#39;,
            onOpen: &#39;filterOpenedCallBack&#39;,
            onClose: &#39;filterClosedCallBack&#39;
        }
    }])
})(overwrite.require(require, dirname), overwrite.Page)页面级组件由*.js、*.wxml、*.wxss组成，分别由注册页面引入，其中js部分不可再次使用Page构造
[AppleScript] 纯文本查看 复制代码
├── index.js
├── index.wxml
└── index.wxss[AppleScript] 纯文本查看 复制代码
//页面级组件js声明
/**
 * 筛选器
 */
var dirname = &#39;pages/internalComponent/filter&#39;,
    api = require(&#39;../../../utils/api.js&#39;)(dirname)

var bgAnimation = api.createAnimation({
        duration: 200
    }),
    contentAnimation = api.createAnimation({
        duration: 200
    });

module.exports = {
    data: {
        items: [],
        selectedId: &#39;&#39;,
        bgAnimation: {},
        contentAnimation: {},
        isOpen: false
    },

    /**
     * 监听组件加载
     * @param  {Object} props
     */
    onLoad: function(props) {
        this.setData({
            style: props.style
        })
    },

    /**
     * 初始化
     * @param  {Array} items
     * @param  {String | Number} selectedIndex
     */
    init: function(items, selectedIndex) {},

    /**
     * 选中
     * @param  {Object} e
     */
    select: function(e) {
    }
}
登录后复制

以上是艺龙微信小程序框架组件实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
微信小程序
来源：php.cn
上一篇：关于微信小程序中图片处理的问题总结 下一篇：使用小程序画布组件绘制自动缩放正方形功能
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
npx create-react-app 命令出现错误，我该如何解决？ 我一直在尝试使用'npxcreate-react-app'命令创建一个新的React应用，但似乎对我来说无效。最近有其他人遇到过这个问题吗？我有一个稳定的互联网连接，并确保我的系统...
来自于 2024-04-05 14:42:18
0
1
3511
如何使用 CSS 删除 Next.js 中井字游戏板上每行下方的空格？ 为什么每一行下面都有一个空格？（CSS）我正在尝试制作一个Next.js井字游戏应用程序来测试我的技能。但是，我遇到了css问题。似乎每行板下方都存在填充问题-每行下方都有一个小空...
来自于 2024-04-05 11:39:02
0
1
1431
如何通过 DOM 而不是通过表来呈现数据 我对我正在创建的应用程序有疑问，我正在使用Oracle数据库，并且我正在从数据库中获取信息并通过表格将其呈现在屏幕上，但我想尝试单独处理这些数据，例如创建一个段落并显示一个值。我只...
来自于 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY用户登录后的授权流程 在登录Google后，我无法在任何地方找到关于用户授权账户的信息。我有一个基于laravel的应用程序，它登录到Google后，我们会收到用户的电子邮件、令牌等信息，那么我们如何将...
来自于 2024-04-04 09:40:59
0
1
310
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板