小程序的注册及页面的编写

编写小程序

• 小程序文件类型与目录结构
• 注册小程序页面，View、Image、Text等基本组件的用法
• Flex弹性盒子模型（在C3中已存在，但在小程序布局中会大量使用弹性盒子技术，本章节不会涉及，后续会详细讲解）
• 移动端分辨率及小程序自适应单位RPX

（注：以上四点是学习中的主要内容，当然后续的学习中还会有零散的小知识）

---

注册：

• 小程序注册地址：https://mp.weixin.qq.com/cgi-bin/wx
• 下载web开发工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

注册完成后获取小程序的openid

打开web开发者工具本地小程序，添加项目，没有openid可以选择无(无ID对后期的上线发布会有影响，导致无法上线)

进入项目：

1. view标签就是div标签
2. navigator标签当成a标签
3. text标签页当当成div标签只不过里面是打文字的 也可以设置背景
   注意上面块状要自己加display:block

项目结构：

1. 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
2. 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
   app.js 小程序逻辑
   app.json 小程序公共设置
   app.wxss 小程序公共样式表

一个小程序页面由四个文件组成，分别是：

1. js 页面逻辑
2. wxml 页面结构
3. wxss 页面样式表
4. json 否页面配置
   注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。

移动设备的分辨率与RPX

• pt也称为逻辑分辨率
• pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位
• px指物理分辨率，和屏幕尺寸没有关系。就比如：点能有大小吗？

如何做不同分辨率设备的自适应？

• 以ip6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位
• ip6下 1px = 1rpx = 0.5pt
• 使用rpx，小程序会在不同的分辨率下进行转换，而使用px为单位不会