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