分类：小程序

2020
10-08

小程序中的箭头函数的具体使用

这个是ES6的箭头函数，res=>可以理解为function(res)箭头函数的最大好处就是省略了varthat=this从而将this改为静态。var函数名=参数名=>返回值;varf=v=>v;//等同于varf=function(v){returnv;};如果不需要参数或有多个参数，要使用圆括号varf=()=>5;varsum=(num1,num2)=>num1+num2;如果函数的代码多于一条，就必须使用大括号将其括起来，并使用retun语句varsum=(num1,num2)=>{returnnum1+num... 继续阅读 >

2020
10-08

微信小程序点击生成朋友圈分享图(遇到的坑)

上个月boss交给我个微信小程序的活，告诉我只需要负责前端页面这块，问我多久做完，于是我不知天高地厚的说一礼拜就能完工，哈哈哈，果然，现实总是那么无情的来打脸了。。。磨磨蹭蹭一共用了将近3个礼拜才算完事。今天就来总结下遇到的各种坑好了~~~由于做的是仿照包你说的小程序，这里就借用包你说的截图好啦（这个做出来是模拟器跟真机上都会显示生成的图片的，鬼知道是为啥。。）唔，不废话了，直接上代码好啦A:wxml(一定要加... 继续阅读 >

2020
10-01

Django微信小程序后台开发教程的实现

1申请小程序，创建helloworld小程序在微信开发平台（https://mp.weixin.qq.com）申请小程序并获取APPid下载微信开发者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），打开后登录并填入APPid等信息。2添加交互框和按钮index.wxml<!--index.wxml--><viewclass="container"><inputtype="text"class="input"bindinput='input'/><buttonbindtap="calculate">cal</button><view>{{r... 继续阅读 >

2020
09-30

微信小程序调用wx.getImageInfo遇到的坑解决

这几天做到微信小程序详情页分享的功能，需要把原页面的一些参数带到分享页，然后在分享页需要获取图片的宽高等基本信息。1.先说分享传参的方式：在onShareAppMessage方法里面返回的path里面可以带参数传过去，具体传参的方式有两种，一种是可以传对象（需要把JSON对象stringiny）,另外一种是通过一般的参数拼接的方式一个个拼。代码：onShareAppMessage:function(res){letdata=this.data;letshareParams={imgSrc:da... 继续阅读 >

2020
09-29

小程序分享链接onShareAppMessage的具体用法

onShareAppMessage用法：只需要在button标签中加入open-type="share"，小程序ui就会自动识别分享链接功能<buttondata-name="shareBtn"open-type="share">分享</button>js中代码如下：onShareAppMessage:function(options){varthat=this;//设置菜单中的转发按钮触发转发事件时的转发内容varshareObj={title:"转发的标题",//默认是小程序的名称(可以写slogan等)path:'/pages/share/s... 继续阅读 >

2020
09-29

微信小程序国际化探索实现(附源码地址)

随着小程序应用越来越广泛，国际化支持逐渐成了刚需。官方文档给出了一个国际化方案，但觉得配置起来稍微有点复杂，对项目结构还有一定的要求。如果是旧项目改动成本太大，遂决定自己实现一个小程序国际化方案。源码地址：https://github.com/cachecats/miniprogram-i18n一、项目结构整体目录结构如下图：assets存放资源文件，如图片constants存放项目中用到的常量i18n存放语言文件，中文是zh-CN.js英文是en-US.js... 继续阅读 >

2020
09-29

小程序瀑布流组件实现翻页与图片懒加载

电商小程序中，用到瀑布流的地方非常多，每次都写一个瀑布流，重复一次逻辑，作为程序员，肯定是非常不愿意的。瀑布流的形式都是大同小异，不同的是瀑布流中每个模块的内容，随业务而变化。所以，我们把瀑布流框架抽象成组件，瀑布流的内容由业务确定。这样即可实现组件化和自定义的最大平衡，微信小程序组件源码。首先，我们来看一下瀑布流组件在实际项目中的实际效果。1实际效果瀑布流组件实际效果如下图所示，左侧为用户交... 继续阅读 >

2020
09-29

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

前言：微信小程序的循环实现，通过wx:for与wx:for-items与wx:key,那么他的主要使用特点是什么呢？1 wx:for从目前的例子看，wx:for的使用确实是对数组来做的，参考微信icon示例程序。示例里面都是对数组进行条件判断，比如iconsizejius就是一个典型的数组。2 wx:for-items与wx:for-item2.1 wx:for-items现在看wx:for-items，和wx:for比，wx:for-items有什么不同呢？【案】笔者认为wx:for-items应该可以包容wx... 继续阅读 >

2020
09-29

Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

Taro就是可以用React语法写小程序的框架，拥有多端转换能力，一套代码可编译为微信小程序、百度小程序、支付宝小程序、H5、RN等摘要：年后入职了一家新公司，与前同事交接完之后，发现公司有一个四端的项目（iOS，Android，H5，小程序），iOS和安卓都实现了左滑右滑的效果，而h5和小程序端没实现，询问得知前同事因网上没找到对应的插件，相关博客也特别少，所以没做就搁置下来了。趁这段时间相对来说比较富裕，于是乎在网上也... 继续阅读 >

2020
09-28

微信小程序pinker组件使用实现自动相减日期

首先，我这里使用pinker组件代码为<viewclass="section"><viewclass="section__title">开始时间</view><pickermode="date"value="{{date}}"start="{{startTime}}"end="2020-09-01"bindchange="bindDateChange"><viewclass="picker"><text>{{date}}</text><imagesrc="/images/three.png"></image></view></picker></view><viewclass="section"><viewclass="section__title">结束时间... 继续阅读 >

2020
09-27

python实现音乐播放和下载小程序功能

（本篇部分代码综合整理自B站，B站有手把手说明的教程）1.网易云非付费内容爬取器（声明：由于技术十分简单，未到触犯软件使用规则的程度）驱动Edge浏览器（自己写驱动会更高端）进入界面，爬取列表中第一个音频地址并存入相应文件夹中。这里有一个最简单的爬虫程序和一个最简单的tkinterGUI编程。注意，要先在网易云音乐网页中将第一个对应音频链接的位置定位：对于以上定位可通过如下方式获得（定位器）：req=driver.find_el... 继续阅读 >

2020
09-27

微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

前言navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。思路隐藏原生样式获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算出该机型的导航栏高度，进行适配编写新的导航栏引用到页面正文一、隐藏原生的navigationBarwindow全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式... 继续阅读 >

2020
09-27

小程序自定义导航栏兼容适配所有机型（附完整案例）

前言大部分情况下我们都是使用微信官方自带的navigationBar配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。思路隐藏官方导航栏获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算导航栏高度编写新的导航栏页面引用自定义导航正文隐藏官方导航栏隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。全局隐藏//app.json"window":{"navigationStyle":"custom"}页面... 继续阅读 >

2020
09-27

详解ES6 CLASS在微信小程序中的应用实例

ES6CLASS基本用法classPoint{constructor(x,y){this.x=x;this.y=y;}toString(){return'('+this.x+','+this.y+')';}}1.1constructor方法constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。classPoint{}//等同于classPoint{constructor(){}}上面代码中，定义了一个... 继续阅读 >

2020
09-27

小程序开发之模态框组件封装

本文实例为大家分享了小程序模态框组件的封装具体代码，供大家参考，具体内容如下一、前言对于模态框肯定大家都知道，诸如：Bootstartp、element-ui、layui等等都有自己的弹出层，并可以之定义内容，但是小程序的弹出层原生的太简单，那么我们如果自定义呢？其实很简单，就是一个遮罩、一个view内容区就搞定了！接下来看一下我自己封装后的模态框效果：感觉还可以哈！二、模态框组件的使用1.先在使用页面的json注册该组件{"naviga... 继续阅读 >

2020
09-27

详解微信小程序工程化探索之webpack实战

前言微信小程序因为其便捷的使用方式，以极快的速度传播开来吸引了大量的使用者。市场需求急剧增加的情况下，每家互联网企业都想一尝甜头，因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能。但小程序开发当中总有一些不便一直让开发者诟病不已，主要表现在：初期缺乏方便的npm包管理机制（现阶段确实可以使用npm包，但是操作确实不便）不能使用预编译语言处理样式无法通过脚本命令切换不同的开发环境，需手动... 继续阅读 >