微信小程序

包结构

根目录

app.json / project.config.json

1. app.json：是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
2. project.config.json：开发者可以自定义个性化设置，可以在不同的电脑上导入配置，工具会自动的导入配置。

app.js

相对于vue中的vue实例，只会在项目中存在一个实列，在微信小程序中就是app实列。这个实列和vue一样，管理整个项目的状态。如，数据，时间，声明周期等。

标签

微信	网页	解释
.wxml	.html	网页文件后缀
view	div	块标签
text	span	文字标签
button	button	按钮标签
map	----	地图标签
image	img	图片标签

底部TabBar设置

框架自带配置

{
  "pages": [
    "pages/index/index",
    "pages/category/index",
    "pages/cart/index",
    "pages/user/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "tabBar": {
    "selectedColor": "#fb4c85",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assert/home_page.png",
        "selectedIconPath": "assert/home_page_active.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "assert/category.png",
        "selectedIconPath": "assert/category_active.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "assert/cart.png",
        "selectedIconPath": "assert/cart_active.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "个人中心",
        "iconPath": "assert/user.png",
        "selectedIconPath": "assert/user_active.png"
      }
    ]
  }
}

用户自定义设置

导航跳转

声明式导航

<view>
  <text>导航组件</text>
  <view>
    <!-- 
    url: 需要跳转页面的路径
    open-type: 跳转方式
    navigate：保留原页面跳转到新页面（默认）
    navigateBack：跳回保留原页面的路径，需要和navigate配合使用
    redirect：关闭当前页面，跳转到新页面
    switchTab：关闭其他所有非TabBar页面，后跳转到TabBar页面
    reLaunch: 关闭所有页面。后跳转到页面
    -->
    <navigator url="/pages/demo/index" open-type="navigate">
      <button size="mini">跳转</button>
    </navigator>
  </view>
</view>

编程式导航

页面生命周期

Page({
  // 页面数据存储地
  data: {},
  // 生命周期函数--监听页面加载
  onLoad(options) {
    console.log("onLoad --> 一个页面只会加载一次，除非此页面被卸载了");
  },
  // 生命周期函数--监听页面显示
  onShow() {
    console.log("onShow --> 页面显示时加载");
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady() {
    console.log("onReady --> 页面渲染完成时，只会加载一次，表示页面可以使用");
  },
  // 生命周期函数--监听页面隐藏
  onHide() {
    console.log("onHide --> 页面被隐藏时，加载。注意不是卸载页面");
  },
  // 生命周期函数--监听页面卸载
  onUnload() {
    console.log("onUnload --> 页面被卸载时，加载");
  },
  // 页面相关事件处理函数--监听用户下拉动作 
  onPullDownRefresh() {
    console.log("onPullDownRefresh --> 手指下拉刷新时，加载");
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    console.log("onReachBottom --> 页面触底了，加载");
  },
  // 用户点击右上角分享
  onShareAppMessage() {
    console.log("onShareAppMessage --> 点击右上角分享小程序时，加载");
  }
})

自定义组件

创建步骤

第一步，创建组件包

第二步，.json文件中标志组件声明

第三步，.wxml中创建组件

第四步，.js中创建数据，方法，生命周期等

第五步，其他页面引入组件的方式

主键事件通信

第一步，在父组件上，声明自定义事件

第二步，在子组件上定义框架事件

第三步，子组件触发父组件上的事件

注意：参数一，引入组件页面上自定义的事件名称，参数二，子组件数据，参数三，事件触发类型，如冒泡行为

第四步，获取子组件的实列

组件的生命周期

// 组件定义
Component({
  // 可以将页面在创建时，销毁时都需要执行的代码放入在这里。
  behaviors: [],
  // 引入外部样式类。
  externalClasses: [],
  properties: {
    // 相当于vue中子组件中的 prop 通信
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  // 相当于vue中的 data
  data: {},
  // 相当于vue中的 methods
  methods: {
    customClick: function (event) {
      console.log(event);
    },
    triggerParentEvent(e) {
      this.triggerEvent("customEvent", {
        child: "这是child的数据"
      })
    },
    childEvent() {
      console.log("父组件触发子组件方法");
    }
  },
  // 组件生命周期
  lifetimes: {
    created() {
      console.log("created", this.data);
    },
    attached: function () {
      console.log("attached", this.data);
    },
    ready() {
      console.log("ready", this.data);
    },
    // 组件移除
    moved: function () {
      console.log("moved", this.data);
    },
    // 组件销毁
    detached: function () {
      console.log("detached", this.data);
    },
    error() {
      console.log("error", this.data);
    }
  },
  // 组件锁在页面的生命周期
  pageLifetimes: {
    show: function () {
      console.log("show");
    },
    hide: function () {
      console.log("hide");
    },
    resize: function () {
      console.log("resize");
    },
  },
})