“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情”

1.认识小程序页面

1.新建小程序页面

只需要在app.json里面的pages中新增页面的存放路径，小程序开发工具即可以帮助我们自动创建对应的页面文件夹以及文件。
假设要在pages下新建一个list文件夹，里面包含list的文件：

我们保存之后会自动帮助我们创建一个list文件夹：

2.修改项目首页

只需要调整app.json中的pages中数组页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当成首页来进行渲染。
默认情况下index在首页：

如果修改页面的路径，把list当成首页：

3.WXML模板

WXML(WeiXin MarkUp Language),是小程序框架设计的一套标签语言，用来构建小程序页面的结构，相当于网页开发中的HTML。
WXML和HTML的区别

标签名称不同

HTML(div,span,img,a)
WXML(view,text,image,navigator)

属性节点不同

<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>

提供了类似于VUE中的模板语法

数据绑定
列表渲染
条件渲染

4.什么是WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。
WXSS和CSS的区别

新增了rpx尺寸单位

CSS中需要手动进行单位换算
WXSS中小程序会自动换算

提供了全局的样式和局部样式

项目根目录中的app.wxss会作用在所有的小程序页面中
局部页面.wxss样式仅会对当前的页面生效

WXSS仅支持部分CSS选择器

#id和.class
element
并集选择器和后代选择器
::after和::before等伪类选择器

5.小程序中的.js文件

通过.js文件来处理用户的操作。例如：响应用户的点击，获取用户的位置等等。 2.小程序中.js文件的分类

app.js

是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序。

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

页面的.js文件

页面的入口文件，通过调用Page()函数来创建并且运行页面。
普通的.js文件

是普通的功能模块文件，用来封装公共的函数或者属性供页面使用。

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情”*

小程序开发【3】

1.认识小程序页面

1.新建小程序页面

2.修改项目首页

3.WXML模板

4.什么是WXSS

5.小程序中的.js文件