初识小程序

一、小程序的页面布局

       1、小程序组件（标签）

                view：代表块级区块 == html中的div

                text：代表行内区块 == html中的span

        2、样式选择器 --- 类选择器、标签选择器、后代选择器

        3、组成页面的4种文件类型

                .wxml：页面结构和内容

                .wxss：页面样式

                .js：逻辑处理

                .json：配置文件

        以下为小程序页面的文件夹结构及简单示例： 

        

.wxml内容：

  精选
  手机
  食品
  内衣
  生鲜
  母婴

.wxss内容：
.navs {
  display: flex;
  justify-content: space-evenly;
  height: 30px;
  font-size: 14px;
}
.active {
  color: #00b26a;
  border-bottom: 2px solid #00b26a;
}

二、 小程序逻辑交互

        1、注册页面

                Page函数，若没有要处理的逻辑交互，也需要注册Page({})，否则页面不展示。

        2、数据处理

                data：初始化页面数据（data是对象形式）

                this.setData方法：更新页面数据，传入对象格式内容

        3、事件处理

                bind:事件名称=事件回调

        以下为简单示例：

{{msg}}

更新msg

// 注册页面函数
Page({
  // data是对象格式
  data: {
    msg: '你好，小程序！'
  },
  // 事件处理函数与data同级
  msgChange() {
    this.setData({
      msg: '欢迎进入小程序世界！'
    })
  }
})

 

        在微信开发者工具的调试台中的AppData中，可查看页面绑定的数据。

 

三、小程序的配置

        xx.json是一个严格的json文件，里面的内容要严格按着JSON格式书写，否则就会报错。

        app.json是全局配置，index.json是页面的单独配置。

        更多配置项可通过微信小程序官方文档查看。

         

        左图为未在页面设置导航栏样式；右图为页面设置导航栏样式内容。

        注：ctrl+i可调起提示，快速输入。

        

{
  "navigationBarBackgroundColor": "#00b26a",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "首页"
}
// index.json

四、小程序路由跳转

        navigator：相当于网页中的a标签，用来实现小程序之间的跳转。url属性支持相对和绝对路径，且不能为空。

跳转log

跳转log

五、小程序长度单位-rpx 

        小程序中新增了rpx单位，优点是能够自动适配不同尺寸的手机屏幕。

        特点：小程序的屏幕均为750rpx；

                   会根据屏幕宽度自动换算成对应的px数值。

        应用实践：建议设计稿以750px为基准，这样，设计稿中的尺寸即为小程序中rpx的尺寸。 

rpx盒子
.rpxExa {
  width: 750rpx;
  height: 100px;
  background-color: paleturquoise;
}