微信小程序
面壁思过程
这个作者很懒,什么都没留下…
展开
-
使用Vue开发微信小程序:mpvue框架
【最近更新】mpvue入门系列教程:如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六)使用mpvue开发小程序教程(五)使用mpvue开发小程序教程(四)使用mpvue开发小程序教程(三)使用mpvue开发小程序教程(二)使用mpvue开发小程序教程(一)接触微信小程序有一段时间的开发者或开发团队,我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架...转载 2019-07-18 09:58:07 · 573 阅读 · 0 评论 -
使用mpvue开发小程序教程(一)
前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用),这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。如果之前还未曾用过Vue这个框架的话,建议你可以快速浏览一...转载 2019-07-18 09:55:14 · 219 阅读 · 0 评论 -
使用mpvue开发小程序教程(二)
在上一篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构。在Visual Studio Code里面打开项目文件夹,我们可以看到类似如下的文件结构:firstapp├── package.json├── project.config.json ...转载 2019-07-18 10:54:07 · 158 阅读 · 0 评论 -
6个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!WeUI WXSSWeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。GitHub地址:https://github...转载 2019-07-18 11:33:09 · 861 阅读 · 0 评论 -
基于JavaScript中Date对象的一些相关操作
本文结合了网上的一些用法封装了一些获取各种日期用法的函数,可以用于制作日历,课程表等相关功能https://www.cnblogs.com/huangjuanyu/p/7986990.html1.获取当前日期(年月日)var date = newDate();//年月日var curYear = date.getFullYear();var curMon...原创 2018-04-24 15:09:36 · 1092 阅读 · 2 评论 -
微信小程序获取手机号发送给后台解密返回
碰到的问题: 在getPhoneNumber中调用wx.login从后台获取sessionKey之后后台解密失败,看了一下官方文档然后在回调中先检查登录态之后解决了问题代码如下://获取用户手机号码 getPhoneNumber: function(e) { let that = this; console.log(e.detail.iv) console.l...原创 2018-12-05 10:35:49 · 4192 阅读 · 1 评论 -
小程序猜明星小游戏实现方法
如图所示效果:1.从全部选项中选择文字文字显示在上面(从左到右哪里为空往哪补),选择的文字消失2.点击上面修改文字时上面文字消失,下面还原之前的位置3.提示从后往前提示 如果前面有错误的文字同时清空4.重置按钮直接清空选择的文字,底部还原 代码:<!--pages/bounty/filmstar/filmstar.wxml--><view...原创 2018-10-22 16:48:09 · 3638 阅读 · 0 评论 -
点击按钮显示正确错误状态(点击到正确显示绿色,点击到错误显示红色)
效果如下:wxml:<view class='difficult2 '> <block wx:for="{{dif2_select}}" wx:key="{{index}}"> <view class="select {{item==answer&&index==id?'correct':''}} {{item!=an...原创 2018-09-29 17:09:19 · 2062 阅读 · 0 评论 -
微信小程序打分
示例: <!-- 评分 --><view class='row love'> <block wx:for="{{[1,2,3,4,5]}}"> <image data-index='{{index}}' src="{{click>=index ? '../img/kps_03.png' : '../img/kps_un03...原创 2018-10-06 10:23:47 · 5076 阅读 · 1 评论 -
微信小游戏选择按钮选项错误显示错误同时显示正确
效果如下: wxml:<view class='difficult2 '> <block wx:for="{{dif2_select}}" wx:key="{{index}}"> <view class="select {{item==answer&&id!=-1?'correct':''}} {{item!=answe...原创 2018-10-05 17:57:39 · 747 阅读 · 0 评论 -
封装一个上拉加载,下拉刷新与筛选用同一个请求方法(微信小程序为例)
代码如下:<view class='pagewrap'> <!-- 搜索框 --> <view class='margin'> <view class='seach-box'> <view class='input-box'> <view class='left'> ...原创 2018-08-28 11:19:54 · 1247 阅读 · 1 评论 -
微信小程序将html转化为wxml(单条数据转换)
1.使用外部插件wxpasegithub下载地址:https://github.com/icindy/wxParse2.需要用到的js里引入const WxParse = require('../../wxParse/wxParse.js'); onLoad: function(options) { var that=this; var parms = JSO...原创 2019-01-08 15:29:04 · 1264 阅读 · 0 评论 -
微信小程序将html转化为wxml(循环列表)
wxParse-微信小程序富文本解析组件: https://github.com/icindy/wxParsegit上有详细的基本使用方法在开文目录下引入下载好的文件wxParse 第一种方法 这是一个蠢方法js中引入wxParse.js文件const WxParse = require('../wxParse/wxParse.js');//这是某一段需...原创 2019-02-20 11:22:25 · 2436 阅读 · 0 评论 -
微信小程序下拉刷新在真机上不回缩问题的解决方法
加上wx.stopPullDownRefresh(); //停止下拉刷新onPullDownRefresh:function(){this.setData({p: 1})this.getData(1, 0) wx.stopPullDownRefresh(); //停止下拉刷新},原创 2019-03-05 15:00:21 · 4479 阅读 · 0 评论 -
微信小程序 旋转木马轮播图
效果图如下wxml代码:<view class='top'> <swiper class='swiperClass' indicator-dots='true' style='height:784rpx;width:100%' circular previous-margin="140rpx" next-margin="140rpx" bindchan...原创 2019-03-02 15:59:37 · 1860 阅读 · 1 评论 -
微信小程序复制到剪切板功能取消自带的提示框
在内容复制成功之后调用wx.hideToast() wx.setClipboardData({ data: 'concent', success: function (res) { wx.hideToast(); } });原创 2019-03-02 17:37:48 · 6991 阅读 · 8 评论 -
如何在微信小程序中使用字体图标
小程序中经常会使用到图标,由于小程序限制大小,图标使用太多比较占内存,考虑到使用字体图标会比较省内存字体图标选用的是阿里巴巴矢量图标库使用步骤如下1.选择想要的图标加入购物车2.点击购物车图标会弹出一个侧边栏,点击里面的添加至项目3.选择Font class按钮, 右击下面的链接会有一个转到xxx.css的文件,复制里面的内容4.小程序中使用...原创 2019-08-28 14:13:04 · 326 阅读 · 0 评论 -
微信小程序button设置了open-type="share"的按钮如何禁止向上冒泡
定义一个空的事件catchtap="share"<button class='share' open-type="share" catchtap="share">js share:function(){ console.log('禁止冒泡') },原创 2019-08-29 10:03:19 · 2857 阅读 · 0 评论 -
微信小程序用Promise封装请求,统一管理接口
第一步先在util文件夹下面新建一个如下的目录1、url.js里面保存的是正式服测试服的域名,也可以添加其他的一些项目中会使用的域名信息2、ajax.js里是用promise封装的网络请求3、api.js里是用来统一管理页面中的接口主要代码如下url.js// let mainUrl = 'https://xxx' //正式服let mainUrl =...原创 2019-08-30 09:22:10 · 3189 阅读 · 9 评论 -
微信小程序高度自适应
// 高度自适应(rpx) wx.getSystemInfo({ success: function(res) { var clientHeight = res.windowHeight, clientWidth = res.windowWidth, rpxR = 750 / clientWidth; //...原创 2018-08-13 14:30:33 · 4261 阅读 · 0 评论 -
微信小程序分页
Page({ /** * 页面的初始数据 */ data: { page: 1, contentlist: [], max_count:'20', //根据后台每页的数据设定 hasMoreData:'' //是否有更多数据文字 }, /** * 生命周期函数--监听页面加载 */ onLoad: fun...原创 2018-08-03 10:41:14 · 2042 阅读 · 5 评论 -
微信小程序开发遇到的各种小问题
1.禁止ios页面下拉上拉空白的情况在该页面的json中配置 "disableScroll": true,2.同时请求两个接口数据(其中一个接口的参数来自上一个接口时使用回调函数,避免上一个接口还没返回数据时下一个接口就已经执行)3.定时器问题(为了安全在设置定时器之前先清空定时器 避免定时器同时执行多个)clearInterval(light_timer);light_t...原创 2018-08-03 10:32:50 · 639 阅读 · 0 评论 -
关于微信小程序textarea时事获取value值的操作
1.把textarea放在<form>表单里面进行操作(常用操作)//wxml//textarea绑定了失去焦点时的事件<form bindsubmit='fabiao'><view class='evaluation_concent'><textarea placeholder="觉得这件商品如何,快来说几句吧" value='{{concent}}'...原创 2018-04-27 13:10:28 · 23618 阅读 · 3 评论 -
关于微信小程序中获取单个checkbox是否被选中状态的值
1.单个CheckBox的使用一般用于做类似于记住密码功能的单个复选框需要获取是否选中时wxml部分//wxml<checkbox-groupbindchange="niming"><view class='check-box'><checkboxvalue="是否匿名"/>是否匿名</view>&...原创 2018-04-27 14:24:25 · 39602 阅读 · 3 评论 -
微信小程序实现笑脸评分功能
1.image方式实现的笑脸评分功能由于我这里的图片使用的不是背景图,所以实现方法跟使用背景图的方式不同你也可以使用wx:for来操作 由于微信小程序需要base64格式或者网图才能设置背景图 所以就没用背景图//首先这里放的是差中好评的三张图,首先进入页面进行评分时需要默认是好评 1.png表示的是未选中图片 2.png代表的是选中的图片 图片点击绑定了同一个函数<view ...原创 2018-04-27 15:09:12 · 4833 阅读 · 0 评论 -
小程序获取input里的值
小程序事件的target currentTarget detail 1.target触发事件的源组件属性类型说明idstring事件源组件的idtagNamestring当前组件的类型datasetobject事件源组件上由data-开头的自定义属性组成的集合2.currentTarget触发事件的组件属性类型说明idstring事件组件的idtagNamestring当前组件的类型datas...原创 2018-05-02 21:43:32 · 8193 阅读 · 0 评论 -
微信小程序---完整的验证码获取倒计时效果 ---根据手机号是否符合要求进行判断
图示:(为了录屏把计时器调快了 自己吧计时器设成一分钟就行)wxml代码:<view class='shouji_info'><view class='info_list'><input placeholder='请输入手机号' bindinput="phoneInput"></input></vie...原创 2018-05-07 14:31:29 · 6351 阅读 · 6 评论 -
微信小程序之头部选项卡和左侧选项卡
1.写死//wxml<view class="swiper-tab"><view class="swiper-tab-list {{Tab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">0000000000</view><view class=&原创 2018-04-27 17:00:41 · 4476 阅读 · 0 评论 -
微信小程序自定义弹出模态框禁止底部滚动
图示:wxml代码:<view class='fix_bottom'><view>分享</view><view>电话咨询</view><view class='active' bindtap="showDialogBtn">立即报名</view></view>&原创 2018-05-17 17:53:45 · 2367 阅读 · 0 评论 -
微信小程序输入框的一些问题
1.微信小程序处理软键盘弹出布局上移遮住输入框的解决方法 相信很多人在开发微信小程序时都遇到这个问题,当你在小程序上预览时,底部的input在聚焦时弹出的软键盘会把input框遮住一小部分,不管是inpu还是textarea 给他们设置cursor-spacing属性就可以解决这个问题 了。 以input作为例子<input placeholder='请输入初试专业...原创 2018-05-10 11:28:42 · 16611 阅读 · 2 评论 -
目前为止最全的微信小程序项目实例
wx-gesture-lock 微信小程序的手势密码WXCustomSwitch 微信小程序自定义 Switch 组件模板WeixinAppBdNovel 微信小程序demo:百度小说搜索shitoujiandaobu 小程序:石头剪刀布(附代码说明)audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义star 微信小程序开发之五星评分switchCity 微信小程序...转载 2018-04-24 17:46:25 · 922 阅读 · 0 评论 -
微信小程序页面跳转方法和携带参数详解
1.页面跳转方式(1)标签跳转open-type的属性值对应api里的用法即wx.的用法 <navigator url="/page/navigate/navigate?title=navigate" open-type="switchTab" hover-class="navigator-hover">跳转到新页面</navigator>(2)wx.navigateTo ...原创 2018-04-24 17:12:21 · 4410 阅读 · 0 评论 -
前端实现MD5加密(以小程序为例)
MD5.jsvar rotateLeft = function(lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));}var addUnsigned = function(lX, lY) { var lX4, lY4, lX8, lY8...原创 2018-08-02 16:02:57 · 2679 阅读 · 0 评论 -
微信小程序组件模板的使用
组件部分<!-- 组件模板 --><view class="wrapper"> <view>这里是组件模板自身的内容</view> <slot name="name1"></slot> <slot name="name2">原创 2018-07-30 17:37:47 · 1341 阅读 · 0 评论 -
用es6封装微信小程序wx.request()函数
封装原理:(先考虑网络请求中会改变的值,把改变的值作为参数引入)会改变的值:1.url (同一项目url相同,可提前把url放在app.js中作为全局变量使用)2.data(后台接口的其他参数)假设后台返回的数据是这样:{code: "1", message: "操作成功", result: {…}}code=1时表示操作成功message表示后台返回的提示信息result表示返回的要用到的结...原创 2018-06-14 10:19:06 · 3478 阅读 · 0 评论 -
微信小程序动态更改导航栏标题文字内容
1.需求:实际开发中很多时候我们需要通过上个页面传过来的值动态的更改标题栏文字,方法如下:onLoad: function (options) {wx.setNavigationBarTitle({ title: options.name }) // options.name表示上个页面传过来的文字},2.直接设置onLoad: function (options) {wx.setNav...原创 2018-06-06 10:40:04 · 16811 阅读 · 0 评论 -
微信小程序—微信小程序端支付功能
1.小程序初始化获取oppenid//app.jswx.login({success: function (res) {var that = this;if (res.code) {//console.log(res.code)wx.request({//根据code 获取openid 接口url: getApp().globalData.hostRoot, //假的ur...原创 2018-06-12 10:37:02 · 589 阅读 · 0 评论 -
微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点:1.所有的input textarea button全部包含在form表单元素里2.button 必须有formType="submit" 这个属性3.form 必须有提交事件 即bindsubmit="back_houtai"4.通过 name属性取值,name名称不可重复w...原创 2018-05-16 16:54:46 · 22064 阅读 · 0 评论 -
微信小程序本地缓存数据增删改查
1.以wx.getStorageSync为列子实现增删改查图示:<view class='name'>姓名:{{name}}</view><view bindtap='show'>保存</view><view bindtap='updata'>修改</view><view bindtap='delete'>删除&a原创 2018-05-25 15:27:03 · 4438 阅读 · 0 评论 -
微信小程序引用外部js的方法详解
1.把你要封装的函数写在util目录下的util.js2.util.js目录代码 (module.exports 这一步非常重要)//util.js//封装的函数function count(str) {console.log(str)}//转化成小程序模板语言 这一步非常重要 不然无法正确调用module.export...原创 2018-05-08 12:00:28 · 36510 阅读 · 0 评论