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

编写小程序

  • 小程序文件类型与目录结构
  • 注册小程序页面,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

小程序的注册及页面的编写_第1张图片

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

小程序的注册及页面的编写_第2张图片

进入项目:

小程序的注册及页面的编写_第3张图片

  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

小程序的注册及页面的编写_第4张图片

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

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

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

你可能感兴趣的:(小程序)