这一篇主要说头像上传，以及修改保存的功能。本章节主要用的知识点有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...

最近在做小程序时候，发现一些商品图片在渲染时一直报错，也不显示，但是控制台打印出来的路径却有没有问题报错提示出错的路径会在前面自动加上“page/**”,思索了之后想到了微信只能解释https的地址，顿时来了主意， 错误如图 在遍历时对图片路径进行处理，加上https://dataSource&&dataSource.map((item,index)=>{item.image="https://"+item.imageconsole.log("普通咖啡----",item.image);data.push(item)}) 这样处理后就不报错啦...

以前做过PC页面微信支付，但是这次在小程序直接调用微信支付功能还是方便很多先放个微信官方API链接：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5先说说整个下单支付流程的整体思路，0，准备工作：一，appId，开发帐号中注册时的appId。二，sdkContent，后台返回的包含有金额，支付方式等信息的数据包。三，key值，商户申请微信支付功能时所配置的密钥准备好后，1，首先选择下单金额和支付方式【这里默认只有微信支付一个】，拿到金额和支付方式和用户唯一识别码【登陆时就放入微信缓存中】，发送到后端下单接口生成订单号2，拿到返回的订单号和用户唯一识别码，再到后台现金充值接口拿到sdkContent，也就是一会在下一步微信支付中要用到的package参数，3，将开发帐号中注册时的appId【注意：区别于后台之间通讯用的appId，两不同也不通用】，时间戳，随机串，签名方式和数据包按微信签名规则拼接成字符串，后面接上key值【key值：商户申请微信支付功能时所配置的密钥】使用MD5方...