封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wxss.wxml.json.js,如图: 2.我们可以写一些组件样式和布局,跟页面写法类似,我就不多说了,直接把代码贴出 : popup.wxml <view class="wx-popup" hidden="{{flag}}"> <

效果图: 代码: wx.showLoading({ title: '加载中...', }) wx.request({ url: '', success(res){}, fail(){}, complete(){ wx.hideLoading() } }) 小程序官方api   https://developers.weixin.qq.com/miniprogram/dev/api/wx.showLoading.html

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

微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通过参数data传数据, wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: e.detail.value }, header: { 'content-type': 'application/json' // 默认值 }, success (res

在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request 请求失败",可以搜索到很多相关的文章,下面列出一些: wx.request 失败| 微信开放社区 微信小程序 wx.request 请求失败- SegmentFault 思否 小程序部分机型小程序用户无法发起 wx.request 请求,网络错误问题 ... wx.request()失败,requ

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

微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (res) { console.log(res.tapIndex) }, fail (res) { console.log(res.errMsg) } }) 但是客服消息功能调用,没有api.只有按钮. <button open-type="contact"></button&

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

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("

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

微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJECT) 发起网络请求 url data header method dataType wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'applicat

代码地址如下: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"> <!--内

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文

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

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

首先打开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

(一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XSS 和 别的一些强大的组件了,如果有额外的需求,可以去官方文档查阅一下 (同时不常用的属性,也就不提了) https://developers.weixin.qq.com/miniprogram/dev/component/ (1) view view 可以理解为传统页面开发中的 div 块级元素,

何为组件 组件封装一段代码,不仅可以在其他的页面中可以使用,也可以在本页面中使用,不用再重复造"轮子".组件可以提高代码的复用率,因此善于使用组件在微信小程序开发中是非常重要的. 创建组件 在项目的根目录下创建components文件夹,用于存放项目中所有的组件,组件拥有wxml.wxss.js.json文件 你可以像普通的pages一样对待组件 <view class="event-items"> ...... </view> 引入组件 若

简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索.关键词输入提示.地址解析.逆地址解析.行政区划和距离计算等数据服务,让您的小程序更强大! 有时候我们在做微信小程序时有些功能需要获取当前的地理位置及附近地点的一些要求,但是

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

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