小程序页面结构(快速入门)

总体结构
页面文件组成
标签栏

小程序学习笔记

总体结构

根目录文件中app.js, app.json, app.wxss定义是全局共享
每个页面中定义的app.js, app.json, app.wxss是为了让该页面首先执行自己页面定义的

WXML

基于XML语言
用来定义页面结构

<view class=".sdq">史迪奇</view>

WXSS (可选)

遵守CSS 单位比CSS高级支持less语法
用来定义页面样式

.sdq{
    display: flex;
    color: #aaa;
}

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
    })
  }
})

JSON (可选)

设置当前页面工作时的window的配置
常常用于配置状态(设置页面字体字体颜色背景颜色)

// 该字段用来表明子页面的
{
    // 页面
    "pages": [
        // 子页面 首页
        "pages/index/index",
        // 增加页面 减少页面也同理
        "pages/sdq/sdq",
        // 子页面 日志
        "pages/logs/logs"
    ]
        // 页面
    "window": {
        // 下拉 loading 的样式
        "backgroundTextStyle": "light",
        // 导航栏背景颜色
        "navigationBarBackgroundColor": "#000000",
        // 导航栏标题文字内容
        "navigationBarTitleText": "史迪奇的博客",
        // 导航栏标题颜色
        "navigationBarTextStyle": "white",
        // 下拉刷新
        "enablePullDownRefresh": true
    },

    /* 可以增加 */

    "sitemaplocation": "sitemap.json"
    "tabBar": {
    // list要两包括两个以上才生效
    "list": [{
       // 首页
      "pagePath": "pages/index/index",
       // 给文章名字
      "text": "首页",
       // 在同级创一个sdz的文件夹然后放图片在里面 
       // 点击前的图标
      "iconPath": "sdq/_sdq.png",
       // 点击后的图标
      "selectedIconPath": "sdq/sdq.png"
    {
      "pagePath": "pages/sdz/sdz",
      "text": "史迪奇",
      "iconPath": "sdz/_sdq.png",
      "selectedIconPath": "sdz/sdq.png"
    }
  ]},
}

页面文件组成

[page-name].js

页面逻辑文件, 用于创建页面对象, 以及处理页面生命周期控制和数据处理

[page-name].wxml

WXML指 Wei Xin Markup Language

用于定义页面中元素结构语法遵循XML语法注意是XML 不是HTML语法

[page-name].json (可选)

设置当前页面工作时的window的配置此处会覆盖app.json中的window设置只可以设置window的属性

[page-name].wxss (可选)

wxml是Wei xin Style Sheet

用于定义页面样式语法遵循CSS语法扩展CSS基本用法和长度单位 (rpx响应式像素) 支持less语法

标签栏

最多5个标签最少2个表情

// 该字段用来表明子页面的
{
    // 页面
    "pages": [
        // 子页面 首页
        "pages/index/index",
        // 增加页面 减少页面也同理
        "pages/sdq/sdq",
        // 子页面 日志
        "pages/logs/logs"
    ]
        // 页面
    "window": {
        // 下拉 loading 的样式
        "backgroundTextStyle": "light",
        // 导航栏背景颜色
        "navigationBarBackgroundColor": "#000000",
        // 导航栏标题文字内容
        "navigationBarTitleText": "史迪奇的博客",
        // 导航栏标题颜色
        "navigationBarTextStyle": "white",
        // 下拉刷新
        "enablePullDownRefresh": true
    },
    "tabBar": {
        // 字体颜色
        "color":"#444",
        // 点击颜色
        "selectedColor":"#219bf3",
        // 背景颜色
        "backgroundColor":"#e0e0e0",
        // 页面边框
        "borderStyle":"white",
        // 标签栏位置
        "position": "top"

    // list要两包括两个以上最多五个才生效
    "list": [{
       // 首页
      "pagePath": "pages/index/index",
       // 给文章名字
      "text": "首页",
       // 在同级创一个sdz的文件夹然后放图片在里面 
       // 设置选中前的图标
      "iconPath": "sdq/_sdq.png",
       // 设置选中后的图标
      "selectedIconPath": "sdq/sdq.png"
    {
      "pagePath": "pages/sdz/sdz",
      "text": "尾页",
      "iconPath": "sdz/_sdq.png",
      "selectedIconPath": "sdz/sdq.png"
    }
  ]},
}

作者: 我叫史迪奇
本文来自于: https://sdq3.link/Applet-WXML-WXSS-JS-JSON.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

小程序 页面结构(快速入门)