小程序记录（新手入坑）

小程序刚出来的时候开发过一个，早已忘的一干二净。

一直用vue开发，再来开发小程序感觉诸多限制,满脸泪水。

有考虑用框架感觉没必要，虽说可以兼容多端，但是呵呵。。。还是看个人吧

习惯性小坑

wx:if 不要写成  v-if   vx-if   vx:if  ，绑定数据要用{{}}括起来，和老版本的vue差不多

*尽量用微信提供的组件，不要用html标签，多些几个class就完事了，不然会撞鬼。

*小程序的目录结构可以自己额外添加，没有必要统一口径，怎么爽怎么来，可以添加但是不要删除这些固定搭配。

*图片等资源文件可以放在别的服务器里，需要配置域名哦，然后直接访问路径，小程序是有大小限制的。

*访问data内的数据vue是this.test ,小程序this.data.test,设置数据是this.setData({test:'呵呵'})

*通过 const app = getApp();获取全局的应用实例

*app.js 里有 app .globalData 相当于设置全局变量的地方  在app.js 获取全局实例用this即可

*添加组件的json文件里 "component": true,这个玩意不能忘，很可能是自己通过别的方式建的文件，组件js里的properties相当于vue的props,   lifetimes:{ready:function(){}}是组件的生命周期,

*组件的方法写在methods里，页面的方法写在page({})里

* <view data-id="{{item.id}}" catch:tap="test">  test(e){  e.currentTarget.dataset.id  //获取id}

 

页面引入组件要在该页面的json中声明,不用在app.json中声明

{

"usingComponents": {

"my-header": "/components/my_header/my_header"//声明组件

},

"navigationStyle": "custom"//自定义头部导航，页面的返回啥的都会不干掉，只剩右上角的二个小按钮，页面写的结构会顶头，因为原来的导航已经被干掉了，不同机型的状态栏不停哟

}

返回按钮根据页面的深度判断的，分享出去直接打开的是没有二级的深度的，当时准备用场景值来判断顶部返回按钮的存在，结果群里打开和个人打开等等的场景值是不一样的，所以场景值应该用在针对特定的某一场景

*页面分享搜这个onShareAppMessage

 

~~~~~~~~~~~~~~~~~~~~~~~~~~

tabbar

*底部的导航叫做tabbar


*另外tabbar页面的data会缓存下来，对就是页面渲染数据的data，如果刚好该页面做了一个无限加载的列表，那么恭喜你入了第一个坑，那么你的pagesize这些参数需要重置

如果该页面和搜索页面有交互，那么恭喜你，搜索页跳过来时，只能通过wx.switchTab跳转，无法带参数，无法带参数，无法带参数，恭喜你入了第二个坑,可以通过app .globalData或是本地存储解决,

并且页面跳转过来的onload只会在开始加载一次，所以跳转过来需要通过onshow来代替onload，这是第三个坑

我通过onTabItemTap监听tabbar切换清楚了一些本地存储,这是第二个坑导致的第四个坑

（页面调试）

通过渲染的列表点击进去很烦啊，不怕。

点击普通编辑的下拉框选择添加编译模式，弹窗内的提示很易懂，不做拓展。

setStorageSync 

wx.setStorageSync （同步） 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

这个是和H5的localStorage类似的，但是传值不一样例如：wx.setStorageSync('area', JSON.stringify(area));。

wx.setStorage（异步）什么是异步不解释

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

picker 

省市区选择器：mode = region ，微信提供的，不要自己傻傻去写，还有别的自己去看文档https://developers.weixin.qq.com/miniprogram/dev/component/picker.html。

如果只有省和市，就自己乖乖写吧。对，看我很乖。下面直说几个注意点

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="name">

　　<view class="picker"> 当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view>

</picker>

multiSelector 多列选择器

bindchange  picker确定按钮触发的事件

bindcolumnchange 每列滚动触发的事件

 

multiIndex 是一个下标数组 我写的是省市的联动，只有二级例：[0,1]，如果三级,例：[0,0,0]

multiArray 格式是这样的

let a = [{name:'a'},{name:'b'}]

let b = [{name:'c'},{name:'d'}]

multiArray =[a,b]

range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

~~~~~~~~~~~~~~~~~~~~~~~~~

canvas

需求是一个分享的图片，带文案，带封面，带小程序码

用canvas画图的时候引入一些图片需要是https开头

并做好域名配置（详情->项目配置里查看 配置需要去微信公众平台）

然后通过wx.getImageInfo进行转换，不转换在真机是无法画入到画布的

如果画入的文案过长需要换行，那么api只有一个宽度设置，并不会自动换行，所以得自己做处理

附上网上找的js

/*
    换行的文字
    params @ctx canvas对象
    params @str 文字
    params @pageX 文字x坐标
    params @pageY 文字y坐标
    params @lineHeight 文字行高
    params @canvasWidth 绘制区域大小
     */
    drawText(ctx, str, pageX, pageY, lineHeight, canvasWidth) {
      var lineWidth = 0;
      var lastSubStrIndex = 0; //每次开始截取的字符串的索引 
      for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > canvasWidth) {
          ctx.fillText(str.substring(lastSubStrIndex, i), pageX, pageY); //绘制截取部分                
          pageY += lineHeight; //行高              
          lineWidth = 0;
          lastSubStrIndex = i;
        }
        if (i == str.length - 1) { //绘制剩余部分                
          ctx.fillText(str.substring(lastSubStrIndex, i + 1), pageX, pageY);
        }
      }
    }

小程序码的生成网上查了很多资料，还是建议后台生成返回。后台需要用到当前需要分享的页面的路径，注意，这里的路径一定要是线上的路径。

我做的时候是绘制好后生成图片，然后进行预览，可以保存到本地

canvas的大小可以这样来写，微信是rpx

<canvas class="my-share" canvas-id="firstCanvas" style="width:{{width}}px;height:{{height}}px;"></canvas>

绘制好后通过 wx.canvasToTempFilePath 生图片放在界面进行预览，注意生成图片时canvas一定要是显示的状态，position: fixed;top: 1111150%;

 

图片预览

*图片预览，幻灯片效果用这个wx.previewImage

如果上面需要多了一个删除按钮，或者是 分享按钮，那么恭喜你，自己重新写一个吧

里面滑动的预览效果可以用swiper来制作

swiper 属性 需要用到的

 current 当前所在滑块的 index

bindchange current 改变时会触发 change 事件，event.detail = {current, source} //注意如果通过此api改变下标会导致轮播左右不停来回切换闪动

bindanimationfinish 动画结束时会触发 animationfinish 事件，event.detail 同上 ，

唉~不想写了，看到这里你也知道我是一个有故事的人了