小程序

想做一个功能齐全的类似qq音乐的微信小程序，demo来了，可供大家参考，包含音乐搜索、音乐列表及播放停止示例代码： var util = require('../../utils/util.js') var app = getApp() Page({     data: {         playingSong: {},         songUrl: '',         songImg: '',         songState: {             progress: 0,             currentPosition: '00:00',             duration: '00:00'         },         isPlaying: true,         lyric: ''     },     onLoad: function(){         console.log('playsong onLoad');         let that = this;         let songdata = app.globalData.songData;                   that.setData({             playingSong: songdata,             songUrl: 'http://ws.stream.qqmusic.qq.com/C100' + songdata.songmid + '.m4a?fromtag=38',             songImg: 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + songdata.albummid + '.jpg',         });         let thatData = that.data;         wx.playBackgroundAudio({…

最近流行微信“跳一跳”小游戏，本站也有文章分享：，本文主要分享实现2048的算法以及注意的点，一起来学习吧！（源码地址见文章末尾）。 算法 生成4*4棋盘视图 随机生成2或4填充两个单元格 记录用户touch时的起始位置和结束位置，以此判断滑动方向 根据滑动方向移动单元格，并进行相同值合并 用户一次滑动完成后重复执行步骤2 判断游戏是否结束，并根据游戏结果产生不同提示 难点 确定滑动方向 用户滑动时相同格子合并，并移到滑动方向一侧实现 视图实现 1、用wxml+wxss生成棋盘视图 2、用wx:for将数据渲染到每个单元格 逻辑实现 1、页面加载完毕随机用数字2或4填充两个单元格 2、判断用户滑动方向 使用touchStart事件函数获取起始位置touchStartX、touchStartY 使用touchMove事件函数获取终点位置touchEndX、touchEndY var disX = this.touchStartX - this.touchEndX;     var absdisX = Math.abs(disX);     var disY = this.touchStartY - this.touchEndY;     var absdisY = Math.abs(disY);       // 确定移动方向 // 0:上, 1:右, 2:下, 3:左 var direction = absdisX &gt; absdisY ? (disX <p>3、根据滑动方向（假设向右滑动）移动表格以及相同项合并</p><p>将2048的棋盘生成4*4的二维数组list，为空的空格用0表示</p><pre class="brush:php;toolbar:false">// 比如棋盘数据如下 var grid = [     [2, 2, 0, 0],     [0, 0, 0, 0],     [0, 8, 4, 0],…

本篇文章主要介绍了微信小程序开发之从相册获取图片–使用相机拍照，本地图片上传的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml-->  <button>获取图片</button>  <image></image> 登录后复制 2.index.js //index.js  //获取应用实例  var app = getApp()  Page({   data: {    tempFilePaths: ''   },   onLoad: function () {   },   chooseimage: function () {    var _this = this;    wx.chooseImage({     count: 1, // 默认9     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有     success: function (res) {      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 …

首先我们需要申请一个微信公众账号，因为这个公众账号是公司的，所以不方便透露给大家！ 相信简单的申请工作都是没有问题的！申请成功之后，菜单栏会出现“高级功能”，如下图： 里面有2中模式可以选择，“编辑模式”和“开发模式”，上面都详细的描述就不再想大家作解释了！  这里我们要讲的是开发模式。好了，到现在为止就可以进入开发模式的讲解了！ 然后我们在配置URL和Token值，如下图： URL：填写我们放demo的访问网址，例如：http://www.123.com/wx_sample.php Token：这个值可以随便写。 打开文件wx_sample.php，修改下面的内容 define("TOKEN", "weixin"); //修改成自己填写的token 登录后复制 填写之后，就可以提交了！ 验证成功之后，我们可以写一个小例子测试一下，如下代码： <?php /** * wechat php test */ // define // your // token define("TOKEN", "weixin"); $wechatObj…

近期在做微信小程序的项目，目的为了上传多张图片，数量不能超过3张 ，而且在php里因为上传图片被设置了只能上传2M，导致上传不成功，所以我在前端  设置一个函数，用了微信api(wx.chooseImage)获取图片，如果图片大于3张的情况弹出一个提示，不能继续上传图片了，如果图片大于2M的情况弹出一个提示，只能在上传2M以下的图片， data:{     img:[], //设置一个数组 } add_img:function(){     var that = this,     img = that.data.img;         if(img.length <p><img src="https://img.php.cn//upload/image/954/146/829/1533609195998491.png" title="1533609195998491.png" alt="1.png"></p><p>我用的是tempFiles里的size判断图片大小， 支持最低版本1.2.0 (不懂，知道这个1.2.0是哪里的版本？ 微信版本还是微信小程序开发工具的版本？ 知道的评论一下，谢谢)    </p><p>相关文章：</p><p><a href="http://www.php.cn/xiaochengxu-383017.html" target="_self">实例详解微信小程序上传图片到服务器</a></p><p><a href="http://www.php.cn/js-tutorial-368314.html" target="_self">微信小程序多图片上传的实现实例代码</a></p><p>相关视频：</p><p><a href="http://www.php.cn/course/248.html" target="_self">微信小程序全方位深度解析视频教程</a></p> 登录后复制 以上就是微信小程序上传多张图片限制大小的实例解析的详细内容，更多请关注米云其它相关文章！

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabbar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 小程序开始开发及基本设置 微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/ 下载微信开发者工具 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 新建项目 注：有APPID记得填写上，没有就点级小程序，记得勾上普通启动模板； 基本配置 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabbar 配置项指定 tab 栏的表现，以及 tab…

相信有很多时候,大家都会遇到要利用 canvas画布 生成图片的时候.当然我也遇到了, 在项目中wxml页面中生成的canvas之后,我发现怎么样给canvas标签加css都无法让canvas不影响到页面, <canvas style="opacity:0;position:fixed;z-index:-9999;"> // 无论是opacity 还是 z-index 都无法解决,多多少少会影响 </canvas> 登录后复制 几番琢磨,想出以下解决方案: 在canvas外层加父标签,再控制父标签的显示 <view style="width:0px;height:0px; overflow:hidden"> //让父标签 0宽 0高 隐藏溢出 <canvas > </canvas> </view> 登录后复制 如果上述不行请看下面这个:…

微信小程序是不能直接连接数据库进行数据操作的，这是出于安全的考虑。基本上都是先通过wx.request向服务器发起请求，再由服务端程序(如php)来对mysql数据库进行数据操作。 微信小程序怎么连接到数据库 1、在微信小程序的index.js文件中编写请求数据库的小程序代码; var app = getApp() Page({     onLoad: function () {         wx.request({             url: 'http://localhost', //服务器地址             data: {                 name: 'bob'//请求参数             },             header: {                 'content-type': 'application/json'             },             success: function (res) {                 console.log(res.data)             }         })     } }) 登录后复制 2、 用PHP编写后台服务器响应代码 <?php $name=$_GET["name"] ;//接收参数 $conn =…

经常为小程序设置颜色背景，突然发现一张好看的图片怎么把它设置为背景呢? 微信小程序怎样加背景图片     以下总结了三种方法： 1、wxss中通过background-image设置网络图片来添加背景图片； 微信小程序中background-image不能使用本地图片 推荐学习： background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx) 登录后复制 2、将图片转为Base64编码格式，然后使用background-image来添加背景图片； background-image:url(转换之后的base64字符串) 登录后复制 3、利用流布局，设置z-index层级，将image标签置于底层来添加背景图片。 //html <view>   <image></image>   <view>     我是一串字符串   </view></view> //css .container{   width: 100%;   height: 600rpx;   margin: 0;   padding: 0;   position: relative; }…

昨天整理昨天整理之前的东西时，发现自己之前封装了一个轮播图，当然比较简单，也比较low。但是使用起来还是比较方便，并且易修改（就差每一个干嘛用的解释一遍了）。话不多说，看效果： 这里写描述 实现方法很简单，下面给大家写下实现代码：、、、_dz_scrollview = [[DZScorllView oc]initWithFrame:CGRectMake(0, 0, Screen, Screen/4+40)]; _dz_scrollview.dataSource = @[@”http://upload-images.jianshu.io/upload_images/4032443-6dd3429b9d4360c8.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″,@”http://upload-images.jianshu.io/upload_images/102559-3aaac594bfd6fe9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″,@”http://upload-images.jianshu.io/upload_images/29021-89926ef0f86bd670.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″,@”http://upload-images.jianshu.io/upload_images/4067161-ac329fffd016fee5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/720/q/50″]; _dz_scrollview.isAutoTroll = YES; _dz_scrollview.delegate = self; [View addSubview:_dz_scrollview];、、、这里是总共实现的代码，当你这里使用的是url，如果没有url的话就给一个图片，名字叫做aboutimg就OK了，自己可以在自己项目中给的；到这里项目就实现了； 以上就是简单轮播图，使用UIButton实现的详细内容，更多请关注米云其它相关文章！