小程序开发步骤小记

• 注册小程序账号

  打开注册页面，点击立即注册:

  选择小程序:

  填写注册信息:

  激活邮箱，填写登记信息

  需要注意的是: 如果不填写，功能是会受限的，是不能上传小程序的，看到的管理界面也会不同。

  

• 添加开发成员

  在小程序管理界面，成员管理，添加成员(管理员不需要再添加):

• 获取 AppID

  在小程序管理界面，开发管理，开发设置下获取 AppID:

• 下载小程序开发工具

• 登录账户

  扫描二维码登录，注意不要用游客模式登录。

• 创建项目

  可以用Taro初始化项目。

• 根据设计稿开发

  Taro 默认以 750px(物理像素，对应机型如 iphone6/7/8，375x667(逻辑分辨率)) 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置，例如设计稿尺寸是 640px，则需要修改项目配置 config/index.js 中的 designWidth 配置为 640。目前 Taro 支持 750、 640 、 828 三种尺寸设计稿。

  const config = {
    projectName: 'myProject',
    date: '2018-4-18',
    designWidth: 640,
    ...
  };
  

  编译的时候会把 px 转换为 rpx 单位。rpx 全称叫 responsive pixel，最初是由微信小程序推出的单位，可以根据屏幕宽度进行自适应。rpx 规定：不论屏幕大小，在小程序上屏幕宽度都是 750rpx。

  假如按 640px 的宽度出设计稿，设计稿中的一个长方形的宽度为 640px，即满屏，我们在代码中给的 width 也是 640px，而小程序上屏幕的宽度都为 750rpx，这即意味着有一个换算比率:

  deviceRatio = 750 / 640 = 1.1718175
  

  因此，640px 最后会转换为 640x1.1718175=750rpx

• 真机调试

  选择预览或真机调试，用手机扫描二维码:

  在手机小程序界面上打开设置，打开开发调试:

  重新扫描二维码启动小程序后右下角会出现 vConsole 按钮，通过该按钮就能够打开控制台看到 log 信息:

  

其他

screenHeight 是手机屏幕的总高度，包含状态栏、导航栏、页面内容。状态栏是手机最上面显示信号、电量的那一小条。导航栏是显示小程序标题和胶囊按钮的那一条。

windowHeight 是页面内容的高度，默认不包括状态栏和导航栏。但是如果你设置了自定义导航栏（"navigationStyle":"custom"），它的值就和 screenHeight 一样了。

• px 与 rpx 相互转换

  px = 750/屏幕宽度rpx;
  rpx = 屏幕宽度/750px;