小程序-第三方库，自定义构建，分包预下载，getApp

第三方组件库 - npm 支持-切记 小程序的node包不可以直接使用

且要在工具构造npm！！！！！---不然会报错

miniprogram-computed - npm---这是computed的文档

--------------------------------------------------------------------------------------------------------------------------------

npm 支持 - 自定义构建

1. 新建小程序项目
2. 创建文件夹：miniprogram
3. 将项目相当的文件移入到文件中

    `pages、app.js、app.json、app.wxss`

4. 在`project.config.json `中配置：**`"miniprogramRoot": "miniprogram/",`**,这一步就是重新设置它的根目录

5,在project.config.json 中配置：

"setting": {
  ...
  // 开启手动构建
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./miniprogram"
    }
  ],
}

- `packNpmManually` 启用 npm 构建手动配置
- `packNpmRelationList` 手动构建 npm 配置详情
- `miniprogramRoot` 自定义小程序的根目录

配置完就可以 下载插件 ui库之类的了，下载好ui库就在那里看人家文档中怎么配置的。一切都调配好了之后  我们按上方的工具 然后按 创建npm，就会有这样的报错

解决方法就是 重新启动微信小程序开发工具，此时就可以点击创建npm了   创建好之后会报错 这时候只需要再创建一次npm就可以解决

--------------------------------------------------------------------------------------------------------------------------------

框架接口 - getApp

getApp使用时 不需要wx。

1，就是在app.js中写的公用 对象，方法等  你要在哪个页面或组件使用  就在那 调用getApp()就可以拿到  app.js中的东西了，，，比如-- const app = getApp()   console.log(app.name)就拿到了app.js中的name值

app.js中的代码要写到 App({中})

--------------------------------------------------------------------------------------------------------------------------------

框架接口 - getCurrentPages

getCurrentPages可以用来获取页面栈中的内容

--------------------------------------------------------------------------------------------------------------------------------

内置API - 本地存储

有： wx.setStorageSync--在本地存入一个数据

wx.getStorageSync--读取本地的一个数据

wx.removeStorageSync---删除本地存储的一个数据

wx.clearStorageSync---清空本地存储的数据

在小程序中本地存储可以直接存入对象或数组类型的数据，无需要 JSON.stringify 进行处理

存入数据

page({
 存入本地数据
点击事件(){
 wx.setStorageSync('name','小明')  前面的是存储的命名，后面的是存储的值

 wx.setStorageSync('user',{name:'小明',age:18})  也可以直接存储对象且不用JSON....处理
}
})

读取数据


page({
 读取本地数据
 const name = wx.getStorageSync('name') 就可以拿到 本地存储名为name里面的值

 const obj = wx.getStorageSync('user') 就可以拿到 本地存储名为 user对象里面的数据
 
})

删除指定存储数据---wx.removeStorageSync('name')

清空所有存储数据---wx.clearStorageSync()

• 在小程序中 Sync 结尾的 API 指的是同步方式执行，同步方式执行的 API 在使用时简洁比较好，但缺点是同步会阻塞程序执行，执行效率上相较异步版本要差一些。

--------------------------------------------------------------------------------------------------------------------------------

内置API - 获取头像

1，第一步 设置一个按钮 button

2，第二步 设置按钮属性：open-type值为chooseAvatar--<button open-type="chooseAvatar" />

3，第三步 添加监听事件 chooseavatar事件 --<button bindchooseavatar="getAvatar"/>

总结：合起来的写法就是:<button open-type="chooseAvatar" bindchooseavatar="getAvatar">获取用户头像</button>

事件监听-可以在getAvatar中获取头像地址，或者存储头像之类的操作

// pages/06-getuseInfo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: ''
  },
  // 获取微信用户的头像
  getAvatar (res) {
    console.log(res)
    // 保存头像信息
    this.setData({
      src: res.detail.avatarUrl
    })
  }
})

--------------------------------------------------------------------------------------------------------------------------------

内置API - 上传头像

上面得到的头像地址是临时地址，只能在小程序内部使用，要实现永久存储需要将这个图片上传给自已的服务端，文件上传会用到 wx.uploadFile({})。

// pages/06-getuseInfo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: ''
  },
  // 获取微信用户的头像
  getAvatar (res) {
    console.log(res)
    // 保存头像信息
    this.setData({
      src: res.detail.avatarUrl
    })
    // 上传临时文件
    wx.uploadFile({
      url: 'http://ajax-api.itheima.net/api/file', 这里是上传的服务器地址
      filePath: res.detail.avatarUrl,  这里是头像地址
      name: 'avatar', 这里要和后端给的东西一致
      success: result => {  这里是上传成功后的的一些处理
        // 返回的数据在：result.data 中，是一个 json 格式的字符串
        const res = JSON.parse(result.data)
        console.log(res)
      }
    })
  }
})

--------------------------------------------------------------------------------------------------------------------------------

内置API - 获取昵称

1,第一步：设置一个 input组件， 添加属性type值为 nickname-<input type="nickname">

2，第二步：监听 input 组件的 input 、blur 、change 等事件获取表单中的值

总结：<input type="nickname" bindchange="inputhandler"/>

--------------------------------------------------------------------------------------------------------------------------------

分包 - 基本使用

说明：将小程序拆分成若干个部分叫做分包，分包中的页面只有被访问到时，小程序才会去下载相应的代码包，tabBar 的页面只能放在主包当中，使用分包也不是对代码体积完全没有限制：，整个小程序所有分包大小不超过 20M

作用：能够实现自动加载当前所需部分小程序代码，在一定程序能够提升小程序的加载速度，同时也能解决小程序代码包大小不能超过 2M 的限制。

使用：

第一步：来到app.json文件中 随便找个位置(但要在打括号内哈) 写上以下的代码

{
分包
"subPackages": [
      {
        "root": "subpack1", 分包对应的代码根目录，即分包的代码放在哪个文件夹中
        "name": "subpack1",  分包的名称，可以省略
        "pages": [  分包中所包含的页面路径
          "pages/001-sub/index"
        ]
      }
    ],
}

第二步：写好上面的代码 直接按保存就可以自动生成 分包了

使用分包：

使用分包的话就跳转进去就可以使用了

<navigator url="/subpack1/pages/07-sub/index">to07</navigator>

--------------------------------------------------------------------------------------------------------------------------------

分包 - 预下载