• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序制作笔记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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 )

 

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap