Weapp
明知山_
这个作者很懒,什么都没留下…
展开
-
微信小程序页面跳转传递Json,防止?解析
// 传 wx.navigateTo({ url: '../pass/pass?item=' + encodeURIComponent(JSON.stringify(item)) });// 收this.data.row = JSON.parse(decodeURIComponent(options.item))原创 2021-06-17 16:53:41 · 338 阅读 · 0 评论 -
微信小程序写字板功能
功能参考来源<view class="write"> <canvas class="write_main" canvas-id="sign" bindtouchmove="move" bindtouchstart="start" bindtouchend="end" bindtouchcancel="cancel" bindlongtap="tap" disable-scroll="true" binderror="error"></canvas> &.原创 2021-06-17 10:43:24 · 1148 阅读 · 0 评论 -
微信小程序返回携带参数或触发事件
let pages = getCurrentPages(); let prevPage = pages[pages.length - 2] prevPage.active() //调用上个页面的事件 prevPage.setData({ //setData给上个页面的data进行赋值 select:1 }) wx.navigateBack({ delta: 1 })...原创 2021-06-17 10:21:43 · 393 阅读 · 0 评论 -
微信小程序设置自定义头部居中
设计图界面需要使用自定义头部 "navigationStyle":"custom"标题等信息就需要与胶囊按钮对齐 // 获取胶囊信息 let rect = wx.getMenuButtonBoundingClientRect() // 获取标题文字信息 let query = wx.createSelectorQuery() query.select('.title').boundingClientRect() query.exec((res) => { l.原创 2021-04-23 15:47:19 · 2184 阅读 · 0 评论 -
微信小程序文字循环滚动
<view class="marquee"> <view class="main" style="transform: translateX({{move}}px);"> 种一颗树最好的时间是十年前,其次是现在 </view></view>.marquee { position: relative; width: 100%; height: 50rpx; line-height: 50rpx; white-space: no.原创 2021-03-31 18:01:32 · 1955 阅读 · 5 评论 -
微信小程序限制同时播放多个视频
<view class="box"> <view class="row" wx:for="{{videoList}}" wx:key="index" > <view class="cover"> <video src="{{item.url}}" id="{{item.id}}" bindplay="playVideo" ></video> </view> </vie.原创 2021-03-30 09:32:03 · 655 阅读 · 0 评论 -
微信小程序限制金额输入
limitCash(val) { let num = val.toString(); //先转换成字符串类型 if (num.indexOf('.') == 0) { //第一位就是 . num = 0 + num } num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的 num = num.r..原创 2021-03-22 16:07:50 · 412 阅读 · 0 评论 -
微信小程序子组件监听父组件传递的值
Component({ properties: { qa: Object, }, observers: { 'qa': function (params) { console.log(params) },原创 2021-02-03 10:15:02 · 2205 阅读 · 0 评论 -
微信小程序弹窗禁止页面滚动
在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-ycatchtouchmove需要接收个方法,不然会一直警告<view class="box">占位</view><view class="pop" catchtouchmove="touchMove"> <view class="popbg"></view> <.原创 2020-12-30 15:30:36 · 3110 阅读 · 0 评论 -
微信小程序editor富文本编辑
直接复制看效果<editor class="editor" id="editor" show-img-toolbar show-img-resize value="{{content}}" placeholder="请输入" bindready="readyEditor" bindstatuschange="changeEditor" bindinput="inputEditor"></editor><view class="toolbar" catchtouch.原创 2020-12-04 15:26:23 · 1162 阅读 · 1 评论 -
微信小程序导航栏页面滑动切换
<view class="banner"> <scroll-view scroll-x="true" scroll-with-animation="true" scroll-into-view="nav-{{select > 0 ? select -1 : select}}"> <view wx:for="{{sortList}}" wx:for-index="index" wx:key="index" id="nav-{{index}}" cl.原创 2020-09-16 10:37:06 · 3924 阅读 · 7 评论 -
微信小程序获取页面高度
watchHeight() { var query = wx.createSelectorQuery() //.box为指定类名高度 query.select('.box').boundingClientRect((res) => { this.setData({ height: parseInt(res.height) }) }).exec() }原创 2020-09-15 11:22:23 · 2705 阅读 · 0 评论 -
微信小程序skeleton骨架屏
github链接地址https://github.com/jayZOU/skeleton.git克隆dist文件放入到项目component目录中page页面引入{ "usingComponents": { "skeleton": "../../component/skeleton/skeleton" },}文本添加<skeleton wx:if="{{isSkeleton}}" loading="chiaroscuro"></skeleton>.原创 2020-08-06 11:42:39 · 1052 阅读 · 0 评论 -
微信小程序锚点选择导航栏
<view class='box'> <scroll-view scroll-y scroll-with-animation style="width:25%"> <view class='nav'> <view wx:for="{{navList}}" wx:key='index' class="title {{index == active ?'select':''}}" data.原创 2020-07-24 16:37:33 · 859 阅读 · 0 评论 -
微信小程序密码输入框
<view class='box'> <view class='row' bindtap='inputFocus'> <view class="{{index == active ? 'active' : '' }}" wx:for="{{Length}}" wx:key="index"> <input type="number" value="{{entryList.length>=index+1?entry.原创 2020-06-01 16:07:15 · 4015 阅读 · 1 评论 -
微信小程序调用api实现弹出层动画
<button bindtap="showModal">Click Me</button><view class="pop" wx:if="{{showPop}}"> <view class="popbg" bindtap="hideModal"></view> <view class="popup" animation="{{animationData}}">内容</view></view>原创 2020-05-29 16:57:39 · 747 阅读 · 0 评论 -
微信小程序使用Painter组件生成海报
文档地址我是直接下载github源码放到项目组件中{ "usingComponents": { "painter": "../../component/painter/painter" }}<view class="box"> <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />原创 2020-05-23 13:53:38 · 3257 阅读 · 3 评论 -
微信小程序引用we-cropper裁切图片
文档地址github下载源码直达链接复制dist文件夹中的 .min.js 和 .wxml文件到项目中我引入的目录结构page页面<view> <view class='avatar'> <image mode='scaleToFill' src="{{avatar}}" bindtap='chooseimg'></image> </view> <view wx:if="{{showWeC原创 2020-05-19 17:44:29 · 891 阅读 · 5 评论 -
微信小程序引入VantWeapp开发
使用原生小程序引用iView Weapp此处是iview Weapp的官方文档链接https://weapp.iviewui.com/docs/guide/start首先是要去官方文档中的GitHub去下载iview Weapp组件然后将 dist 目录拷贝到自己的项目中。我们把需要的组件先在.json里面引入然后去wxml里面拿ok,在刚开始引入组件的时候可能会报组件索引找不到...原创 2019-08-07 16:06:53 · 1525 阅读 · 0 评论 -
微信小程序可移动浮窗
<movable-area class="movable-box" style="height:{{phoneHeight}}px"> <movable-view out-of-bounds class='advisory' x="{{x}}" y="{{y}}" direction="all" damping="50" bindchang...原创 2020-04-20 15:34:45 · 781 阅读 · 0 评论 -
微信小程序之间跳转及传参
在app.json里配置要跳转的微信小程序的appid "navigateToMiniProgramAppIdList": [ "wx6de1111111111", ],调用微信小程序的api跳转 gominapp(){ wx.navigateToMiniProgram({ appId: "wx6de1111111111",//跳转的微信小程...原创 2020-02-11 15:51:41 · 658 阅读 · 0 评论 -
微信小程序处理图片加载失败显示默认图片
微信小程序image组件有个binderror事件专门用来处理图片加载失败的问题,我们只需要传个下标去获取相应的图片位置 <image src="{{item.img}}" binderror="geterr" data-index="{{index}}"></image> data: { recom_list:[]} geterr(e) { var...原创 2020-01-14 16:18:24 · 3595 阅读 · 0 评论 -
微信小程序子组件向父组件传值和方法
子主键 <button type="primary" bindtap="getoption">确定</button> data: { }, methods: { getoption(e) { this.triggerEvent('index', {i:1})//triggerEvent广播数据 index为广播事件 } }父组...原创 2020-01-06 17:31:29 · 1259 阅读 · 0 评论 -
微信小程序实现canvas生成海报保存到本地
先给用户展示没经过处理原图,如果用户需要保存为图片,就在点击预览的时候添加水印,本来想在用户保存为图片的时候在添加水印,文档好像没有这方面的监听。<view> <view class="poster"> <image src="{{img_url}}" data-img="{{img_url}}" bindtap="getpreview"&...原创 2019-12-30 10:41:21 · 641 阅读 · 0 评论 -
微信小程序递归上传图片
<view class="col"> <view class="exhibit" wx:for="{{upload_list}}" wx:key> <image src="{{item}}"></image> <view class="del" data-index=...原创 2019-12-28 10:31:08 · 1677 阅读 · 0 评论 -
微信小程序处理pages的函数比app.js先执行
app.js里获取pages需要拿的参,使用promise处理 getlogin() { var that = this return new Promise(function (resolve, reject) { wx.login({ success: (res) => { wx.request({ ...原创 2019-12-13 18:21:21 · 947 阅读 · 0 评论 -
微信小程序获取input框的值双向数据绑定
<input bindinput="getval" /> data:{ val: '' } gethigh(e) { console.log(e.detail.value) this.setData({ val: e.detail.value }) },在你输入的时候开发工具就会打印出来,如果没有,是开发工具调试基础库的...原创 2019-12-09 10:17:17 · 1222 阅读 · 0 评论 -
微信小程序截取数组每三个为一组渲染
后端将一个数组传给我们,需求要把它们进行切割在进行展示,还有自定义swiper指示点,都会在代码里进行输写data:{ currentSwiper: 0, recom_list: [{ avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png', name: '小...原创 2019-12-06 15:13:29 · 2052 阅读 · 2 评论 -
微信小程序swiper显示左右两边内容
<swiper class="swiper" next-margin="120rpx" previous-margin="120rpx" current="{{currentItemId}}" bindchange="swiperChange" autoplay indicator-dots indicator-active-color="#0C6D4A" circ...原创 2019-12-03 13:54:18 · 1525 阅读 · 0 评论 -
微信小程序递归一键保存多张图片
<view class="info"> <block wx:for="{{dynamic_list}}" wx:for-item="item" wx:key="index"> <view class="row"> <view class="avatar"> ...原创 2019-11-29 16:36:30 · 2895 阅读 · 0 评论 -
微信小程序点击预览图片
getpreview(e) { //img_url是点击当前的图片 //item 是图片数组 var img_url = e.currentTarget.dataset.img_url var item = e.currentTarget.dataset.item var img_list = [] for (let i in item) { ...原创 2019-11-29 16:27:43 · 442 阅读 · 1 评论 -
微信小程序处理富文本图片溢出
//接收后台接口返回来的值 this.setData({ rich: res.data.replace(/\<img/gi, '<img class="rich-img" ') }) .rich-img { width: 100%; height: auto;}原创 2019-11-28 09:03:51 · 848 阅读 · 0 评论 -
微信小程序父组件调用子组件的方法
在子组件的里的methods里定义一个方法// components/header/header.jsComponent({ properties: { }, data: {}, methods: { getrun() { console.log('我是子组件的方法') }, }})在父组件的调用里定义一个id唯一标识按钮用来获取子组件的...原创 2019-11-17 11:54:43 · 2031 阅读 · 0 评论 -
微信小程序父组件向子组件传值
先定义一个子组件 header<view class="top">{{title}}</view>// components/header/header.jsComponent({ properties: { // title: String 简写 title: { type: String, value: "头部组件" ...原创 2019-11-17 11:10:00 · 440 阅读 · 0 评论 -
微信小程序使用scroll-view做导航栏
效果图 <view class='tablist'> <scroll-view class='tablist_ul' scroll-x> <view class="tablist_li {{bechoice == item.id ? 'choice':''}}" bindtap='choiceType' data-id="{{it...原创 2019-08-19 09:59:55 · 1250 阅读 · 1 评论 -
微信小程序封装api接口
在utils新建个http.js文件,然后写入下列代码export default function wxRequest(url, params = {}, method = "GET"){ return new Promise(function(resolve, reject){ wx.request({ url, data: params, m...原创 2019-08-10 11:08:44 · 707 阅读 · 0 评论 -
微信小程序下拉刷新上拉加载
下拉刷新在app.json中 "window": { "backgroundTextStyle": "dark", },在页面的配置项.json中 "enablePullDownRefresh":true在页面的js中 // 触发下拉刷新时执行 onPullDownRefresh: function () { //在标题栏中显示加载 wx.sho...原创 2019-09-02 14:43:58 · 260 阅读 · 0 评论 -
微信小程序引用自定义组件
新建一个component文件夹与page文件夹平级,新建个power文件夹,里面的wxml,wxss,js,json都是与page的一样在.json文件夹中添加 "component": true我在.wxml就简单写一句话,具体的可以自己根据业务添加wxss和js<view><p>实力与野心不符,是件很可悲的事情</p></view&...原创 2019-09-02 15:22:55 · 231 阅读 · 0 评论