小程序学习01（目录文件）

{
    "pages": [
        "pages/index/index" // 页面路径
    ],
    "window": {
        "backgroundTextStyle": "light",//  全局定义小程序的页面颜色，文字颜色
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2", // 定义组件的样式版本
    "sitemapLocation": "sitemap.json" // 定义组件的样式版本
}

app.json文件，入口文件，全局配置问件。

app.wxss全局样式文件

project.config.json配置文件

{
  "appid": "wxcfbb04a7d25dff00", // 项目小程序id
  "compileType": "miniprogram",
  "libVersion": "2.27.0",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": { // 开发者工具的配置 本地设置里相关配置
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

sitemap.json配置文件

微信现在已经开发小程序内搜索，类似于pc端的seo，该文件用于小程序页面是否允许被微信索引。用于用户是否可以被搜索到

 "checkSiteMap": false,关闭控制台中的黄色警告内容。

页面的配置项会覆盖全局的配置项。具体配置参考全局样式配置中的内容

快速新建小程序页面，在全局的app.json文件中，pages下可以快速生成小程序页面。pages配置下页面默认第一个作为小程序的首页。

wxml和html的区别，html(div,span,img,a) wxml(view,text,image,navigator)

属性节点不同

<a href=''#>链接

<navigator url=''></navigator>

卫星中提供的类型于vue中的语法

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

wxss类似于css

css中需要手动进行rem换算，微信中会自动换算

新增了rpx尺寸

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

wxss仅支持部分css选择器

.js文件的分类

app.js

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

页面的.js文件时页面入口文件，通过调用page（）函数来创建并运行页面

普通的.js文件 封装一些公共的函数供页面使用

App({}) //app.js文件
Page({// 页面的.js文件

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})