小程序制作笔记
webstorm 设置
File Types ->右侧上栏寻找 Cascading Style Sheet ，点击->底栏右侧点击 “ + ” 号，添加 *.wxss ->点击弹窗 ok -> 点击大框的 ok
->右侧上栏寻找 HTML ，点击->底栏右侧点击 “ + ” 号，添加 *.wxml ->点击弹窗 ok -> 点击大框的 ok
(提示：这个添加操作表示webstorm能将 *.wxss文件当成css文件处理，将 *.wxml文件当成html文件处理，自动补全等功能都可使用)
1、尺寸单位 使用 rpx
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
|
设备 |
rpx换算px (屏幕宽度/750) |
px换算rpx (750/屏幕宽度) |
|
iPhone5 |
1rpx = 0.42px |
1px = 2.34rpx |
|
iPhone6 |
1rpx = 0.5px |
1px = 2rpx |
|
iPhone6 Plus |
1rpx = 0.552px |
1px = 1.81rpx |
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
js 使用图片宽高时，注意根据设备窗口宽度动态计算。
例如 canvas 绘制 宽 750px 高 1470px 的图片时：
this.setData({ eleScale: systemInfo.windowWidth/750, }); var ctx = wx.createCanvasContext('myCanvas'); ctx.drawImage(tempFilePath, 0, 0, 750*this.data.eleScale, 1470*this.data.eleScale); ctx.draw();
2、图片 引入
相对路径
style内部样式 或者 image 标签 (注意不是 img 标签） 可以使用
background-image 不能使用 （会提示不能使用本地文件）
绝对路径
由于上传代码不能超过2m
图片、音乐等资源 建议传到外部服务器上
使用绝对路径进行访问
3、动画
this.animate(selector, keyframes, duration, callback)
（需注意版本兼容，低版本执行上述动画将会有报错）
例：
this.animate('#container', [ { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' }, { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'}, { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' }, ], 5000, function () { this.clearAnimation('#container', { opacity: true, rotate: true }, function () { console.log("清除了#container上的opacity和rotate属性") }) }.bind(this))
如果需要清除这些样式，可在该节点上的动画全部执行完毕后使用 this.clearAnimation 清除这些属性。
this.clearAnimation(selector, options, callback)
4、 音乐\视频
audio
this.globalData.innerAudioContext = wx.createInnerAudioContext() this.globalData.innerAudioContext.loop = true this.globalData.innerAudioContext.src = "https://sjkb.qiaohu.com/image/bg2.mp3" this.globalData.innerAudioContext.onPlay(() => { // console.log('开始播放') }) this.globalData.innerAudioContext.onError((res) => { // console.log(res.errMsg) }) this.globalData.innerAudioContext.play() this.globalData.innerAudioContext.pause()
video
<video id="myVideo" src="{{curVideoSrc}}"></video>
this.data.videoContext = wx.createVideoContext('myVideo');
this.data.videoContext.play();
this.data.videoContext.pause();
5、跳转
页面内跳转
wx.redirectTo({ url: '../promotion/promotion' });
跳转到小程序
wx.navigateToMiniProgram({ appId: 'wxd25a55025350c4ac',//要打开的小程序 appId path: '/pages/index/index?scene=10',//打开的页面路径，如果为空则打开首页 extraData: { foo: 'bar'//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据 }, envVersion: '',//要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。 success(res) { // 打开成功 } });
6、分享
通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage 事件
<button open-type="share"></button> onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } return { title: '自定义转发标题', path: '自定义分享路径’， imageUrl: '自定义分享图片地址’, } }
7、版本号判断 进行兼容性设置
const version = wx.getSystemInfoSync().SDKVersion function compareVersion(v1, v2) { v1 = v1.split('.') v2 = v2.split('.') const len = Math.max(v1.length, v2.length) while (v1.length < len) { v1.push('0') } while (v2.length < len) { v2.push('0') } for (let i = 0; i < len; i++) { const num1 = parseInt(v1[i]) const num2 = parseInt(v2[i]) if (num1 > num2) { return 1 } else if (num1 < num2) { return -1 } } return 0 } if (compareVersion(version, '2.10.0') >= 0) { } else { }
8 、阿拉丁平台进行 ga 统计
网址
http://doc.aldwx.com/mini-program/join/wx-sdk/base-program
统计事件
wx.aldstat.sendEvent( obj.key, obj.value )
