微信小程序手机号码校验functionisPhone(value){if(!/^1(3|4|5|7|8)d{9}$/.test(value)){returnfalse}else{returntrue}} ...

本次案例是有一点像微信的那个摇一摇但是没有那么好看，一些APP也有看到摇一摇功能。小程序虽然没有提供摇一摇API接口，但是也一个加速器API ，加上搜索一些大神的资料，我这里就做了一个dome，1.模拟数据，从M数组里面，每次摇一下就随机获取一条信息出来，每摇一次就显示不同的数据，注:真正的时候是通过接口返回数据的，因此后台处理好随机产生一条数据，然后前台就获取，响应速度也加快。  　官网API https://developers.weixin.qq.com/miniprogram/dev/api/wx.onAccelerometerChange.html　　如图： 代码：data:{isShow:false,list:[],content:[{title:'小程序答题01',},{title:'小程序答题02',},{title:'小程序答题03',},{title:'小程序答题04',},{title:'小程序答题05',},{title:'小程序答题06',},{title:'员工活动羽毛球赛实施07',},{title:'员工...

这一篇主要说头像上传，以及修改保存的功能。本章节主要用的知识点有1.wx.chooseImage 从本地相册选择图片或使用相机拍照。2.wx.uploadFile将本地资源上传到服务器.3.修改原来的小程序头像并保存，调用后台接口修改操作 第一步：我们要获取本地图片，官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html我这里也贴出来了，不够详细可以去官网看。1、选择图片接口wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。OBJECT参数说明：参数类型必填说明countNumber否最多可以选择的图片张数，默认9sizeTypeStringArray否original原图，compressed压缩图，默认二者都有sourceTypeStringArray否album从相册选图，camera使用相机，默认二者都有successFunction是成功则返回图片的本地文件路径列表tempFilePaths...

刚刚接触小程序，小程序与HTML5有一定的差别，小程序就几个标签，而HTML5一大堆标签，还不断更新，但是新增标签功能强大。做一下微信小程序的布局练练手。感觉还是挺不错的，也封装了很多东西功能出来，与mui有类似。做这个简单的布局，以大海为主题，蓝色调为主色，浅灰为辅。 ...

  微信小程序的右上角就有分享功能但是必须逻辑层必须有onShareAppMessage这个方法，/***用户点击右上角分享*/onShareAppMessage:function(){},ViewCode 微信小程序转发官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/share.html我们可以通过给button组件设置属性open-type="share"，可以在用户点击按钮后触发Page.onShareAppMessage()事件，如果当前页面没有定义此事件，点击就没有效果。相关组件：button微信小程序单击按钮转发，一定要设置open-type。否则无效<view><buttonopen-type="share"><imagesrc="../../../image/images/icon_wechat2@2x.png"></image><viewclass='wenxinwenzi'>微信</view><...

Page({/***页面的初始数据*/data:{array:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){varthat=this;console.log("start");//ajax请求开始wx.request({url:'',//ajax的请求路径method:"get",//ajax的请求方法//header是配置，根据后台配的来的header:{'app-id':app.globalData.app_id,'AUTHORIZATION':token},success:(res)=>{letdataList=res.data.results;//获取到的数据dataList.forEach((item)=>{item.submit_time=item.submit_time.substring(0,10);//要截取字段的字符串})that.setData({array:dataList//数据源})}})}})　　以上wx.request方法来获取数据，其中forEach循环dataList，使用substri...

写在后面的话基本算是吐槽了，在学完小程序的课程之后，我用博客园的api，写了个闪存的小程序，本来兴致勃勃甚至这篇是准备写“我的第一个小程序发布啦”，然而并没有。不是说我偷懒了没写，又或者个人拖延的原因，而是因为： 我一个个人开发者哪来什么企业主体的小程序号啊，于是可以说这个小程序算是暂时死掉了，只能期待将来UCG类目对个人开放时，再将它上架。在这期间还是花了不少时间去鼓捣的，OAuth2的授权，界面的参考和设计，CSS学习和应用，找公共图床，和某个大佬的客户端闪存格式兼容等，所以即使小程序没办法上架，也不算是毫无收获吧。丢一些图做个纪念，下一个小程序的内容已经想好了，抽时间就开始做啦，吸取教训才能更好，我安慰自己说...           ...

之前在讲到模板部分的时候，模板引入了，实际上模板对应的wxss也是可以独立开进行单独引入的。使用 @import 语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束，如下例：/**common.wxss**/.small-p{padding:5px;}4 1/**common.wxss**/2.small-p{3 padding:5px;4}/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;} 1/**app.wxss**/2@import"common.wxss";3.middle-p{4 padding:15px;5}filters主要运动在图片上以实现特效，如模糊则为 -webkit-filter:blur(20px)...

微信小程序中用于发起网络请求的API就是wx.request了，具体的参数太多，此处就不再一一详举了，基本使用示例如下：wx.request({url:'test.php',//仅为示例，并非真实的接口地址method:"POST",data:{param1:'',param2:''},header:{'content-type':'application/json'//默认值},success:function(res){console.log(res.data)}})14 1wx.request({2url:'test.php',//仅为示例，并非真实的接口地址3method:"POST",4data:{5param1:'',6param2:''7},8header:{9'content-type':'application/json'//默认值10},11success:function(res){12console.log(res.data)13}14})值得注意的有如下几点：希望在获取数据之后进行的操作，切记一定要写在success回调中，因为wx.request是...

如果相同的wxml代码可能在不同的页面重复使用，ctrl+c配合ctrl+v的方式，后期维护起来未免也太麻烦了。微信提供了“模板”，可以在模板中定义代码片段，然后在不同的地方调用。使用<template>对代码进行模板定义，并使用name属性为模板进行命名，如：<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template>6 1<templatename="msgItem">2 <view>3  <text>{{index}}:{{msg}}</text>4  <text>Time:{{time}}</text>5 </view>6</template>而在需要使用模板的地...

在微信小程序中，事件的绑定依附于组件，当事件触发时，就会执行事件对应的处理函数。我们回到前几章中的例子，将index页面调整为首页（app.json中调整pages数组元素的顺序），此时我们希望，点击页面中的“HelloWorld”字样，能够跳转到我们之前写的Welcome页面中去：首先来说明一下事件的绑定形式：事件绑定依附于组件，所以其绑定的写法和组件的属性写法是类似的，以key、value形式key以bind或catch开头并跟上事件类型，如bindtap、catchtap，也可以使用冒号如bind:tap、catch:tapvalue是一个字符串，对应Page中同名的函数原来的wxml中HelloWorld对应的组件代码为：<viewclass="usermotto"><textclass="user-motto">{{motto}}</text></view>3 1<viewclass="usermotto">2  <textclass="user-motto">{{motto...

对于小程序中的wxss布局方式，不推荐使用诸如position，float之类的属性，而是采用flex布局，灵活快捷自适应，关键是自适应！此处另起标题也是为了表达我对其强烈的推荐，因为我这个后端都能用flex很好的布局，可见其简单快捷性！强烈推荐阮一峰老师的两篇博文：Flex布局教程：语法篇Flex布局教程：实例篇...

如上图，整个IDE分为四个部分：中间的文件目录树模拟器（左侧）编辑器（右上）调试器（右下） 其中调试器是不是很熟悉？没错，和你用的chrome开发者工具一模一样，稍微有点要提醒的是：.js类型的文件，在Sources中都有两个，其中xx.js是编译后的，xx.js?[sm]才是和我们实际文件相同，调试时使用xx.js?[sm] Storage可以看到当前小程序的缓存内容 AppData可以查看当前程序中的数据信息 最后，模拟器的预览和执行必须在编译后，所以每当你代码进行了更新，先点击一下”编译“，效果才会是最新的。 ...

我总是喜欢在写东西之前唠唠嗑，按照惯例会在博文的开篇写这么一段“写在前面的话”，这次却为了这个唠嗑单独开了一篇文，大概预想着要胡说八道的话有点多。前段时间突然对小程序来了兴趣，说句实话，我都忘记了准确的导火线，大概是一直想做点什么个人的小作品，结果又因为贫穷限制了我买服务器。索性这个世界上有种东西叫“第三方API”，我买不起，我用别人的还不行吗？这个问题解决了，还有个问题没解决，那就是我这个人既不会iOS也不会Android，总不能用第三方API写Web吧，那不是也得要个人服务器，又回到最初的起点。于是用三方API结合微信小程序就很有意思了，适配移动端也容易，体积小，开发起来成本也远远更低，加上现在微信大大提高了小程序在其生态的入口和地位，说不定掌握它的开发也是未来升职加薪的助力。说干就干，索性就去慕课网买了开发教学视频《微信小程序入门与实战》，149，也还好，不算太贵。累计花了约30h，课程也大概上了近80%，顺便花了6h用gank.io的公开API撸了一个简单的刷刷妹纸图片的小程序（目前并没有上线，因为功能太简单了不想提交上线，后续再完善一部分再提交吧==），接近过年，无心再码点什...

最近在做一个导航的时候，发现使用overflow-x:auto来做多内容滑动导航效果很不好，思索是不是可以使用swiper来做一个，研究了下其实发现原理基本相同这里说下，要用swiper做导航菜单，有几个要特别注意的参数1：autoplay，官方说明【是否自动切换】，这个不填，菜单可不能自己动2：indicator-dots ，官方说明【是否显示面板指示点】，这个也不填，3：display-multiple-items，官方说明【同时显示的滑块数量】，敲重点，这个参数必须设为1，要与previous-margin和next-margin参数来控制焦点高亮图居中4，previous-margin和next-margin，官方说明【前边距，可用于露出前一项的一小部分，接受px和rpx值】【后边距，可用于露出后一项的一小部分，接受px和rpx值】5，current，官方说明【当前所在滑块的index】，主要控制哪一个被选中，比如默认加载第二项或点击某一个让其选中  <viewclass="container"><viewclass="swipe...