前言
这是我写的另一篇关于固定区域的canvas裁剪图片组件
最近刚做完一个小程序项目 。其实我本挨炮开发，只因为在网页中多看了她一眼，便被赶鸭子上架，我的第一次就这样被献出去了，整整一个周的加班奋战，从一个对小程序开发的懵懂无知的小男孩变成了一个轻车熟路的老司机，其中坎坷，不尽其说，如人饮水，冷暖自知。
说是懵懂，是因为有一定的web前端开发的理论知识，加上平时自己平时练手了小demo，所以如果你想做小程序开发，建议先学习下相关的语言基础（javascript、HTML、CSS），最低要求起码官方文档是必读的吧小程序API 因为小程序在语言上还是和web 端有不少区别的。
下面就简单总结下项目过程中遇到的问题，希望能帮助到即将入坑或者已经在坑里的你。如果开发中遇到什么问题，欢迎随时垂询。
注册什么的就不赘言了，不过推荐这个快速注册企业账号 用于企业版注册。
首先说明一下，小程序的API也是人写的，有笔下雾在所难免，建议在开发过程使用时检查下API是否有误，比如我当时使用相机组件时获取不到路径，一直以为是自己的问题，仔细看了下代码，是API出了问题。（相机组件中 ，现在官方文档已经修正 已经改为 success: (res) => { } ） this指向问题导致获取不到src属性 。
//最初的代码是；
takePhoto :function() {
const ctx = wx.createCameraContext()
ctx.takePhoto(
success:function(res){
this.setData({ //在这里 this 指向的是当前对象是takePhoto所在的环境 ，并不能获取到data 里面的src。
src: res.tempImagePath
})
console.log('路径是————----',src)
}
})
},
下面正式开始
1 .小程序中如何快速设置水平和垂直居中？
- 使用 justify-content 、align-items 进行水平垂直居中布局 。 首先设置display 样式为 flex，然后同时实现 justify-content (水平) 和align-items（垂直）方向 两个属性同时设置可实现居中显示效果
- 使用margin 属性 auto 设置居中效果
2 . 背景全屏图片禁止滚动 (以真机为准)
开发过程中，设置背景图片为全屏，设置了padding = 0rpx； 这里有个小的坑，关于0 后面是否加单位，自己在写项目的时候并没有多想，后面加上了单位（rpx/px）看似没什么问题 ，然后就给自己后面挖了个小坑。
出现问题 ： 背景和导航栏中间始终会有一条缝隙，而页面会上下滚动。
解决: 将0 后面的单位去掉，同时设置 背景图片的类 的position ：fixed 。 fixed 使用
针对项目具体情况，我这刚好可以解决背景图上下滚动的问题 ，合适的才是最好的 。
至于为什么设置单位和不设置单位有区别，小弟对CSS理解不是很深，知道的还请不吝赐教，在此先行谢过。
- 关于使用Cavans 画布页面滚动的坑
- 项目中使用到了cavans 画布，模拟器上测试没问题，但是在真机上 ，页面会随着上下滑动，各种禁止滚动都不行，上网查资料，最后解决了，这里面有个很蛋疼的操作，按照官方文档的说明，disable-scroll= "true"，可以阻止页面的下拉和滚动。但是真机上会失效，必须绑定一个触摸事件才能生效
<canvas disable-scroll="true" bindtouchmove="touchMove"></canvas>
并且需要注意的是 在cavans上一定要绑定是那个触摸事件真机才能响应到画布触摸事件。bindtouchstart/bindtouchmove/bindtouchend，只绑定两个或一个会导致真机获取不到canvas上的触摸事件。感谢这位山中有一郎的解决办法
<canvas disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" canvas-id="canvas" class="canvas"></canvas>
-
canvas 的层级在当前页面最高
项目中使用canvas（cavans 上的控件都是position: absolute;）模拟器上没有问题，但是真机上选择颜色和粗细无法响应，事件打了log发现，并没有任何输出，一开始以为是我写的控件在手机上太小导致接收不到事件，但是后来才发现并不是，是因为canvas层级最高覆盖掉了其他控件，所以当我们点击选择颜色或者选择画笔粗细时，是cavans在接收事件。既然知道了为什么下面是我的解决办法。
从此世间无我.jpeg
可以看到绿色才是cavans实际的绘画区域，红色框住的只不过是我自己填充的veiw,目的无非就是防止cavans覆盖下面的控件。这样点击画板下面便会弹出滚动的选择板，可以尽情的玩耍了。
- 真机加载本地图片不显示
由于在程序设计之初，界面图片全部是默认加载本地图片。所以这是坑的开始，那么如何加载本地图片，正常我们都会用
background-image: url('../../imgs/kejian.png');
//或者
background: url("../../images/login-bj.png")no-repeat;
模拟器上没问题， 但是 在真机上并不能显示，url 必须是从网络请求才能正常加载，所以我选择使用<image> 标签可以完美的解决上面的额问题。
- 如何设置全屏背景图片 以及子控件布局问题
这个需求本来以为很简单，但是在小程序这变得真的很让人心塞，控件属性少的可怜，可挖掘的的组件实在是让人心颤，没办法，需求为大，还是要解决的 。
下面是我的解决方式,（可能不是最好的，如果有好的布局方式，希望能分享下）：
先说下 思路 图片使用image 组件加载的本地图片， 父元素设置属性 position:relative ;然后在父元素下添加背景和各种子控件 ，子控件使用属性 position：absolute; 缺点也是每个子控件都需要使用绝对定位。
/* .wxml 文件 */
<view class ="container" >
<!--背景图 宽高设置为屏幕的宽高 -->
<image class='image' src='../../Resource/cover.jpg' style='width:{{imageWidth}}px; height:{{imageHeight}}px;'>
<!--比如我这有个image组件-->
<image class='showPic' src=''></image>
</image>
</view>
/*.wxss文件 */
.container{
padding: 0;
position: relative; /*父元素 relative 属性 */
}
.showPic{
/*子元素 absolute 属性 */
width: 380rpx;
height: 380rpx;
top: 250rpx;
left: 250rpx;
position: absolute;
}
6 .关于wx.navigateTo 层叠5次限制
最初并没有发现这个问题，但是在做项目的时候，推到5级页面的时候，发现往下navigateTo 页面没反应，调试窗口报了个警告， Invoke event...，然后很不理解，查了下资料：
小程序页面的实例使用栈的数据结构存储，栈内元素最多5个（换一种方式说，就是用户最多能点击5次返回）（叫小程序是有原因的）
wx.navigateTo 不会将旧页面出栈，会将新页面入栈。(栈内元素个数增加，栈内元素5个时，不能再跳转)
wx.redirectTo 会将栈顶的旧页面出栈，再将需要跳转到的页面入栈（栈内元素个数不变）；
wx.navigateBack 则是将页面栈最后一个元素出栈，因此倒数第二个元素会成为最后一个元素，即变成当前页面；也可以连续出栈好几个元素（大于栈内元素的个数则返回首页）返回栈中的某个页面。具体参考原文
所以在项目中应该尽量结合实际的情况 ，减少navigateTo的使用
我的解决办法是使用 wx:if 这个属性 ，比如A界面根据不同的需求跳转B界面
或者C界面 。那么我们可以这样做，比如
<view class = "B" wx:if="{{locked == true}}">
</view>
<view class = "C" wx:if="{{locked == false}}">
</view>
这样你就可以根据设置locked 的属性，来控制所要跳转的页面，避免过多的使用navigateTo 。
如果想在项目中跳回到某个页面，可以使用
wx.navigateBack({
delta: 1 //返回的层级一面，1代表返回上一界面，2 代表返回上二层界面(说的有点拗口) 一次类推。
})
7.关于录音
- 项目中使用了录音功能，每次在调用录音api 时，如果用户之前没有授权，用户正在录音，突然弹出提示框，这样用户体验很不好，解决办法，可以在页面加载时，调用获取用户权限的API ，直接让用户授权，记得要对用户拒绝授权做下判断。 亲测可用。
var that = this;
//调取小程序新版授权页面
wx.authorize({
scope: 'scope.record',
success() {
console.log("录音授权成功");
//第一次成功授权后 状态切换为2
that.setData({
status: 2,
})
// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
// wx.startRecord();
// recorderManager.start(options);//使用新版录音接口，可以获取录音文件
},
fail() {
wx.showModal({
title: '提示',
content: '您未授权录音，功能将无法使用',
showCancel: true,
confirmText: "授权",
confirmColor: "#52a2d8",
success: function (res) {
if (res.confirm) {
//确认则打开设置页面（重点）
wx.openSetting({
success: (res) => {
console.log(res.authSetting);
if (!res.authSetting['scope.record']) {
//未设置录音授权
console.log("未设置录音授权");
wx.showModal({
title: '提示',
content: '您未授权录音，功能将无法使用',
showCancel: false,
success: function (res) {
},
})
} else {
//第二次才成功授权
console.log("设置录音授权成功");
that.setData({
status: 2,
})
// recorderManager.start(options);
}
},
fail: function () {
console.log("授权设置录音失败");
}
})
} else if (res.cancel) {
console.log("cancel");
}
},
fail: function () {
console.log("openfail");
}
})
}
})
- 关于录音播放的playvoice 我想说的是，如果是网络路径，记得先downloadFile到本地，然后在调用本地路径播放，不要像我当初傻傻的找了半天bug。
8 关于textArea 的巧用
项目中需要展示长篇文字，并没有太多需求，这个时候你可以直接将textArea 的disable 禁用掉。 直接让textArea的value 属性等于你从后台请求到的数据。效果还是不错的。
9 关于转发功能。
记得一定在体验版本上测试，而且测试人员必须安装了测试版本。
10 关于获取用户权限 2017-12-20 更新
如果用户在一开始登录的时候，拒绝小程序获取用户权限，这个
问题很尴尬，因为你不能阻止用户选择拒绝，我们所能做的就是尽可能的想到各种情况，进而做出相应的解决办法。我是参考小程序没有授权时的处理方法
这篇文章解释的很轻楚了，我就不多废话了，不过我做了一些优化，就是并没有新建一个页面，为了减少navigateTo 的使用，我是通过用户获取授权后的状态来控制组件的显示隐藏，如果拒绝了直接提示开启权限组件，否则登录成功，显示正常的的首页面 。算是个小小的优化吧。
我遇到的坑好像就这么多吧，可能不全，也可能是每个人的需求不同。剩下的无非就是普通界面的搭建和逻辑、性能上的优化了。
总结
小程序给我的感觉，对一些轻应用确实很给力，界面渲染效果也很棒，由于API 相对简单些，所以开发起来效率很高。缺点就是控件功能少点，而且可扩展性略差，想做炫酷的界面或者复杂效果，还得原生应用，毕竟小程序是针对轻应用，正在一步步完善，期待能带来更好的体验。
过尽遥山如画。短衣匹马。萧萧落木不胜秋，莫回首、斜阳下。
别是柔肠萦挂。待归才罢。却愁拥髻向灯前，说不尽、离人话。
如果有更多问题，请参考微信小程序常见错误及排除方法 或者联系我，共同讨论，一起学习，一起进步，嘿嘿嘿。
网友评论