小程序2.

1.配置

1.全局配置      app.json

2.页面配置      xxx.json

 "backgroundTextStyle": "light",                背景文字颜色 light | dark
 "navigationBarBackgroundColor": "#f70",        背景颜色
  "navigationBarTitleText": "小程序基础语法",                导航栏表情
  "navigationBarTextStyle": "white"                导航栏+状态栏文字颜色  white | black

  "enablePullDownRefresh": true,                允许页面下拉刷新
  "usingComponents": {}                使用组件

2.页面生命

onLoad                页面加载
onPullDownRefresh                下拉刷新
onReachBottom                触底

3.页面跳转

1.组件        navigator

path         跳转的页面

open-type：
    navigate 跳转
    redirect 重定向（不理历史记录）
    switchTab 切换底部栏
    navigateBack

 2.js进行跳转

  wx.navigateTo 跳转
  wx.switchTab 底部栏切换
  wx.redirectTo 重定向
  wx.navigateBack() 返回

3.小程序页面栈

小程序默认会缓存5个页面栈        A=>B=>C=>D=>E
这个5个页面都会缓存

navigate 添加一个缓存页面栈
navigateBack 移除一个页面栈
redirect 替换一个一个页面栈

4.页面传参

传递参数                        <navigator url="xxxx?docid=yyyy&title=zzz"

获取参数:
onLoad(options){
    //options.docid,options.title
}

5.npm使用

01 在项目的根目录 npm init -y                初始化项目

02  npm i @vant/weapp -S --production        安装

03  构建npm                编辑器-》工具-》构建npm

04 修改app.js
    "style": "v2" 去除
    注册组件
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },

05 修改project.config.json
setting
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

06 在组件中使用                <van-button type="info">主要按钮</van-button>

6.小程序的生命周期

onLaunch         启动
onShow         前台显示
onHide         后台运行

7.页面的生命周期

onLoad 加载                 可以获取页面传递的参数
onShow  前台显示                开始播放视频
onReady 初次渲染完毕                 操作组件或者dom
onHide 隐藏                  停止播放
onUnload 卸载

8.全局数据

app.js
    定义全局数据
  globalData: {    
    num:5
  }

页面

    获取app
const app = getApp();

    onShow中用全局数据更新本地数据
this.setData({count:app.globalData.num})

    更新时候要更新本地和全局
 addCount(){
    // 更新本地count
    this.setData({
      count:this.data.count+1
    })
    // 更新全局的num
    app.globalData.num +=1
  },

9.自定义组件

步骤

    01 创建一个组件

    02 在页面中注册组件
 "usingComponents": {
    "item":"/components/item/item"
  }

    03 在页面中使用组件
<item></item>

组件的构造函数                Component

  外部类   externalClasses

 父组件传入的属性（参数）     properties:

 组件内部的数据   data

   组件的方法         methods

组件的传参（父传子）

 父页面                <item title="收藏夹">

    子组件接收
properies：{
   title:{type:String,value:''}
}
子组件页面wxml使用
{{title}}
子组件js的methods中使用
this.data.title

子传父

    子组件js
this.triggerEvent("toggle",{value:true})
父组件。wxml
<item bind:toggle="toogleHd">
父组件.js
toggleHd(e){
   //获取
    e.detial.value
}

外部类

    子组件.js                         externalClasses:[item-class]
    子组件.wxml                 <view class="item item-class">
    父组件wxml传入           <item item-class="myItem">
    父组件.wxss                .myItem{ height:100rpx !important!;color:red;}

10.分包

1.主包 

1

2

3

4

5

打开小程序 默认只下载主包，小程序的打开速度加快，通过分包可以让项目更加庞大

分包

    "subpackages": [
    {
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],

分包预加载

    "preloadRule": {
    "pages/jok/jok": {
      "network": "all",
      "packages": [
        "news"
      ]
    }
  },

11.插件的使用  wxParse

作用：html转换为wx的组件

01         Copy文件夹`wxParse`

02 在页面js导入文件（地址是否正确）
var WxParse = require('../../wxParse/wxParse.js');

03 导入css
@import "/wxParse/wxParse.wxss";

04 引用数据
var that = this;
WxParse.wxParse('article', 'html', res.result.content, that, 5);

05 导入使用模板
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

12.云开发

概念
    云数据库（moogoDB）
    云函数（nodejs）
    云存储

作用：
    让前端脱离后端直接链接数据库和存储
    写好nodejs ,根据一定的规则操作业务数据，链接数据库
在吧nodejs上传到云端
    在客户端调用nodejs对应的方法，获取服务器数据

云函数定义
    config        配置

    package.json         包管理

    js逻辑
        01 导入wx 的sdk 初始化云
                const cloud = require('wx-server-sdk')
                                cloud.init()
        02 导入数据库
                const db = cloud.database();
        03 导出
                exports.main = async (event, context) => {
                    const wxContext = cloud.getWXContext()
                   //当前微信的环境
                  // event 调用函数传入的参数
                  return  {} 返回的数据
                })

       云函数写好要上传到服务器

调用云函数

    wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称，
data 传入的参数

数据库操作
    查
        db.collection(“guest”).get()
        skip()                                    跳过
        orderby("date","desc")         日期从大到小
        limit ()                                   限制
        .count()                                 查询总数
    增
        db.collection("guest").add({data:{}})
                // data是添加的数据
    删除
         db.collection("guest").doc(event.id).remove()

云文件的操作

    wx.cloud.uploadFile({})
        cloudPath 文件名（存储到服务器的）
        path 本地缓存文件
        success成功  res.fileID文件地址

    wx.chooseMedia({})
        count:9,最多选择数量
         res.tempFiles[i].tempFilePath