微信小程序 wepy框架与iview-weapp的用法详解

最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的，也是在网上看了好久发现iview还不错。引用简单，上手超快，组件绚丽！当然，这里还介绍下微信官方建议的框架也是和不错的，有需要的可以看看（https://github.com/Tencent/weui-wxss），这里主要做view-weapp的介绍

小程序相关项目

1.wepy项目     https://github.com/Tencent/wepy

2.iview-weapp https://weapp.iviewui.com/

3.官网API        https://developers.weixin.qq.com/miniprogram/dev/api/

使用：

1.在新建项目、安装依赖完成的前提下，请继续操作。

2.到iview-weapp官网下载官方代码，保存到任意目录（备用）。

3.到你当前项目的src目录下新建view文件夹（例：myproject/src/view）

4.解压下载的官方，打开iview-weapp/src 目录 复制里面的所有文件夹到 myproject/src/view

5.在页面的 config 配置项里引用 src 里面的组件，用法：如图

6.在template里引用组件

总结

以上所述是小编给大家介绍的微信小程序 wepy框架与iview-weapp的用法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！

赞 (0)

相关推荐

  • 微信小程序第三方框架对比 之 wepy / mpvue / taro

    众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 小程序开发有哪些痛点

  • 详解微信小程序框架wepy踩坑记录（与vue对比）

    wepy框架借鉴了vue的语法风格和功能特性,但是在使用过程中还是发现与vue有很大的不同.现在总结一下自己开发中遇到的问题,共大家参考一下.如果第一次用wepy开发,强烈建议仔细阅读一下这篇文章,一定对你有帮助,会帮你节约很多宝贵的时间.开发过程中也建议大家时不时的回来阅读一次,巩固加强记忆. wepy中的组件 组件里面的坑还不是一般的多! 首先来说说组件间的数据共享.在vue中你也能做到这一点,只要把 data 写成一个对象就可以了,当然你不想让所有的子组件都共享同一份数据,vue中的解决方

  • 微信小程序框架wepy之动态控制类名

    微信小程序框架wepy之动态控制类名

    本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法,供大家参考,具体内容如下 控制类名 style <style lang="less" scoped> .liBkgCor { background-color: red; } </style> template <view class="t_tab"> <li @tap.stop="changeLi({{1}})" class="

  • 微信小程序wepy框架笔记小结

    该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风 格上80%以上接近VUE 优势 组件化开发 小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互事件 仍需在页面处理.无法实现组件化的松耦合与复用的效果. wepy组件示例 // index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel>

  • 微信小程序wx:for和wx:for-item的用法详解

    wx:for="{{list}}"用来循环数组,而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的 如果是一维数组,按照如下方式循环出来: <view wx:for="{{list}}"> {{index}} {{item.name}} </view> 以上代码中,item即为list的别名. 如果是二维甚至多维数组,按照如下方式循环: <view wx:for=&q

  • 微信小程序开发中var that =this的用法详解

    在微信小程序开发中,var that =this的声明很常见.举个例子,代码如下! 示例代码1 //index.js Page({ data: { toastHidden: true, }, loadData: function () { var that = this//这里声明了that:将this存在that里面 wx.request({ url: 'test.php', data: {a: 'a', b: 'b'}, header: { 'content-type': 'applicat

  • 微信小程序 wepy框架与iview-weapp的用法详解

    最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的介绍 小程序相关项目 1.wepy项目     https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.co

  • 微信小程序wepy框架学习和使用心得详解

    一.微信小程序wepy框架简介: 微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性.相对更容易上手,提高开发效率; 二.WePY项目的创建与目录结构 WePY的安装或更新都通过npm进行,全局安装或更新WePY

  • SpringBoot+微信小程序实现文件上传与下载功能详解

    SpringBoot+微信小程序实现文件上传与下载功能详解

    目录 1.文件上传 1.1 后端部分 1.2 小程序前端部分 1.3 实现效果 2.文件下载 2.1 后端部分 2.2 小程序前端部分 2.3 实现效果 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 <!--文件上传与下载相关的依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fil

  • 微信小程序视图容器和基本内容组件图文详解

    微信小程序视图容器和基本内容组件图文详解

    目录 前言 一,视图容器类组件 1.1 view 1.2 srcoll-view 1.3 swiper和swiper-item 二,基本内容组件 2.1 text 2.2 rich-text 总结 前言 开发者可以通过运用组件快速搭建出页面结构,上一章也有对组件进行介绍,那么本文牛牛就来带大家学习小程序的组件. 我们可以将组件理解为微信内嵌的标签,它在小程序承担的作用与HTML的标签一致,不过组件的功能更加多样.具体. 事不宜迟,让我们开冲! 一,视图容器类组件 1.1 view 普通视图容器,

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • 微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名 比如:

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

随机推荐