鸿蒙的多媒体及Menu组件及小程序的多媒体组件

目录: js业务逻辑层视图渲染层 css属性设置效果图微信小程序展示内网穿透工具下载我们在搭建一个小程序或者网站的时候,往往要加载很多的图片,音频和视频文件.如果都从服务器获取静态资源,这样会加大对服务器的负载.使得服务器的运行速度缓慢.这时我们适用nginx反向服务代理来加载这些静态资源,这样可以实现负载均衡,为服务器减压.本文基于鸿蒙多媒体组件和微信小程序的多媒体组件都使用nginx反向代理.(nginx相关文件见附件) js业务逻辑层: export default { data…

详解封装微信小程序组件及小程序坑(附带解决方案)

一.序上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件首先模块化的思想是通用的,在这不做过多解释了.直接上代码,然后解释代码: // wxml <view class="c-menu"> <view wx:for="{{menuList}}" wx:key="{{item}}" class=…

原创：WeZRender：微信小程序Canvas增强组件

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("…

微信小程序之swiper组件高度自适应

微信小程序之swiper组件高度自适应要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后的宽高,如果是适应屏幕宽度的话,就用到 wx.getSystemInfo() 方法设备的信息,并保存到一个数组中,(因为加载的原因不能用push,只能根据索引),切换时监听当前显示的图片,根据其索引找到对应的高度,并赋值给组件即可. wxml: <view class='swiper'> <…

微信小程序中的组件使用1

不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用要使用组件,首先需要有组件页面和使用组件的页面,所以,先在pages文件夹下面新建classic页面,然后在项目根目录下新建component文件用于存放组件,并在该文件夹下面新建like组件: 这里建议在新建页面的时候,先新建存放页面的文件夹,然后编辑器中鼠标右击该文件夹,然后选择新建page.新建组件的时候,也是先新建存放组件…

小程序解决方案 Westore - 组件、纯组件、插件开发

数据流转先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流. Github: https://github.com/dntzhang/westore 组件这里说的组件便是自定义组件,使用原生小程序的开发格式如下: Component({ properties: { }, data: { }, methods: { } }) 使用 Wes…

【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错：jsEnginScriptError

报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/space/space" (using by "pages/code/code");onAppRoute Error: Component is not found in path "component/space/space" (using by "pag…

微信小程序中的组件

前言之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!(小程序文档),现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本! 本篇文章就是手把手教你实现小程序中自定义组件,坐稳啦…

微信小程序之自定义组件的应用

小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图创建组件在根目录创建components目录,然后创建计数组件 count 如图: 组件内容  <view class='count'> <view class='del' bindtap='bindDel'> - </view> <view class='num'> {{num}} </view…

微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放

小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 audio 组件,即使官方推荐更强大的 wx.createInnerAudioContext 但是不符合需求,所以这里用到的是 backgroundAudioManager() https://developers.weixin.qq.com/miniprogram/dev/api/getBackg…

微信小程序基于swiper组件的tab切换

代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 基于swiper组件的tab切换 2.案例目录结构二.程序实现具体步骤 1.tab切换index.wxml代码 <view class="continer"> <!--内…

「小程序JAVA实战」小程序的基础组件（24）

转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/wxProgram.git 中的No.11 基础组件 icon图标组件 rich-text 富文本组件 text 文本组件 progress 进度条组件 icon图标组件官方介绍>https://developers.weixin.qq.com/miniprogram/dev/component/…

微信小程序 | 51，live新课“小程序UI容器组件”的课堂计划

零基础前端自学入门:小程序UI容器组件这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后,从小处着眼.细处学习的尝试. 以下是课堂计划: 最流行的布局之flex布局讲解,附<讲义:flex布局.pdf>分享 flex布局实践,讲解view.scroll-view.swiper.cover-view等组件的使用,附<讲义:小程序容器组件布局实践.pdf>分享,附demo源码…

支付宝小程序日期选择组件datePicker封装

github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS设备上,样式明显不同,因为小程序调用该组件是调用系统原生组件,所以会有一定的差异,另外,小程序提供的日期组件并不满足我当前的业务需求: 该日期为快递上门时间. 用户只可选择的日期范围,当日往后 2 天(即今天, 明天 )的日期,并且时间选择为早上 9 点至下午 18 点间的 10 个小时整点时间.…

关于微信小程序前端Canvas组件教程

关于微信小程序前端Canvas组件教程微信小程序Canvas接口函数上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些例子. 微信小程序画图实例基本步骤 wxml中代码: <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> js中onLoad()函数 const ctx = wx.createCan…

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录根目录下创建 wxcomponents wxcomponents下新建vant目录创建完成后的目录结构 2. 项目中引入vant-weapp组件在vant-weapp的GitHub Releases版块下载最新的zip包解压下载文件,将dist目录拷贝到刚才创建vant目录中 3. 页面中使用引入的UI组件在App.Vue文…

微信小程序校历组件

微信小程序校历组件校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧…

微信小程序内置组件web-view的缓存问题探讨

前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探讨下这个问题. 使用实例: <web-view src="https://www.baidu.com"></web-view> 上面实例就是微信小程序简单的web-view使用展示. 很多童鞋应该都会遇到这样一个问题,为什么我的h5页面已经更新到线上了,但是在微信小…

小程序开发-基础组件icon/text/progress入门

小程序的基础组件--基础内容基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block> </view> <view class="group&q…

微信小程序--页面与组件之间如何进行信息传递和函数调用

微信小程序--页面与组件之间如何进行信息传递和函数调用这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容页面如何向组件传数据组件如何向页面传数据页面如何调用组件内的函数组件如何调用页面内的函数 1.页面如何向组件传数据最常用,最规范的方式,设置数据监听器observer. 假设在页面内引入了组件sc "usingComponents": { "sc":"" } 想要配置一个监听器用来监听页面中数据list的变化…

微信小程序引入ECharts组件

首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts 里面有微信小程序引入ECharts组件的教程,下载了官方的项目后,拷贝ec-canvas到我微信小程序的目录下,然后在我的微信小程序文件夹中创建line文件夹,并新建四个文件index.js inde…

做一个开源的小程序登录模块组件（token）

先了解下SSO 对于单点登陆浅显一点的说就是两种,一种web端的基于Cookie.另一种是跨端的基于Token,一般想要做的都优先做Token吧,个人建议,因为后期扩展也方便哦. 小程序也是呢,做成token的形式是较好的. 流程图 PS:图中4的文字打错了~ 1.启动服务 2.小程序初次加载app.js校验token,使用code去换取token 3.检测User信息是否存在code,不存在则注册新用户,最后返回对应用户Id 4.将随机Token与UserId一起存入Redis中 5.返回To…

小程序：scroll-view组件滑动多次触发scroll事件的bug解决

在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求:若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想到的分页效果. 先来说说的用法: <scroll-view scroll-y="true" style="height:{containerHeight}px" lower-threshold="300" on-scrolltolower={t…

微信小程序中的组件使用2

需求上面两个页面是同一个小程序的不同页面,两个页面中都是用到了label,有相似的地方,但是也有不同之处,这个时候,如果我们想要将这些label做出组件,然后复用,有该怎么做呢? 基础组件首先在components下面新建tag文件夹,用来存放组件: 然后在tag/index.js里面添加最基本的数据 Component({ properties: { text:String }, data: {}, methods: {} }) tag/index.wxml <view class=…

微信小程序覆盖自定义组件样式

小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp.iviewui.com/所提供的组件样式为例,它定义了一个外部类接口: 1. 通过第三方组件给出的externalClasses: ['i-class'],来指定自己的样式类自己的wxml i-class="myrate" <i-rate i-"></i-ra…

微信小程序框架与组件

版权声明:未经博主允许不得转载前言: 学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记,在学微信小程序的时候,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 下面一起学一学,微信小程序的框架吧~看文档,别学别理解.在下的讲述如果不正确的话,可以参考官方文档,也可以帮忙改正.具体还得看…

微信小程序简易table组件实现

前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页面引用时,无需通过import,只需在该页面json文件下配置usingComponents属性即可.(原本想在app.json文件里配置这个属性,从此一劳永逸,但目前貌似还不支持,至少我尝试的时候还不行-.-) 思路:主要是将table的head和tbody部分的数据抽象出来,使之只需要传值就可直…