小程序制作笔记

---

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 )