第三方组件库 - 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--

3，第三步 添加监听事件 chooseavatar事件 --

总结：合起来的写法就是:

获取用户头像

事件监听-可以在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-

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

总结：

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

分包 - 基本使用

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

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

使用：

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

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

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

使用分包：

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

to07

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

分包 - 预下载

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！