# camera
**Repository Path**: sealofyou/camera
## Basic Information
- **Project Name**: camera
- **Description**: 使用微信接口调用照相机功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-09-20
- **Last Updated**: 2022-09-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
1. # javashop
# 一个试试级伟大项目~~~
## 微信小程序开发注意事项
# 微信小程序开发
### 程序页面的执行
```js
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
```
`page` 是一个页面构造器，这个构造器会生成一个页面，在生产页面的时候会把`data`和`wxml`一起渲染出来在页面渲染完成之后页面会收到一个 `onLoad`回调函数,你可以在这个回调中处理你的逻辑
### 循环
```vue
{{logs}}为循环数组 {{log}} 为变量
{{index + 1}}. {{log}}
```
### 跳转
```vue
跳转页面
wx.navigateTo:({
url: '../logs/logs'
})
```
### wxml基本标签
```html
// 相当于div p
// 相当于 span inline-block
// 图片标签
// 可以使用url进行跳转
// 轮播图标签
//滚动标签 需要指定高度
```
### 底部导航栏
```json
"tabBar":{
"selectedColor": "#694E58",
"backgroundColor": "#FAEBD7",
"borderStyle":"black", //只能是黑色或者是白色
"list":[
{
"text": "李欢",
"pagePath": "pages/index/index",
"iconPath": "",
"selectedIconPath": ""
},
{
"text": "傻逼",
"pagePath": "pages/cinema/cinema",
"iconPath": "",
"selectedIconPath": ""
}
]
},
```
**预览图片**
### 函数的使用
#### 1.js结构
**写在`.js`文件中**
```js
Page({
data: {
/*
存放数据
*/
},
onLoad:function(options){
let arr = this.getDate();
// 修改参数
this.setData({array: arr});
},
// 定义函数
getDate:function(){
let arr = [1,2,3];
return arr;
}
})
```
| 函数名 | 作用 | 用法 |
| ---------------------- | ------------------------------------------------------------ | -------------------------------- |
| `onShareAppMessager()` | 1.只有定义了该函数小程序才有转发功能2. 用户点击转发按钮时会回调该函数 3.该函数需要一个`return`和一个`object` 点击之后会转发object内的信息 | |
| Array.map() | 遍历数组函数并且返回一个list数组 | array.map((v) =>{return v.name}) |
| | | |
```json
onShareAppMessage() {
return {
title: 'movable-view',
path: 'page/component/pages/movable-view/movable-view'
}
},
```
#### 2.有参函数的事件绑定
使用`data-?=?` 方法 第一个问号代表变量名 第二个问号代表变量的值
样例：函数是会返回一个event的回反应`dom`元素的信息
```js
{{item}}
// 注意必须用currentTarget 如果用别的会出问题 current为事件源头的信息 target为事件发生元素的信息
handlMenuLeftItem(e)
{
const data = e.currentTarget.dataset; // 获取data-绑定的数据
}
```
#### 3.常用函数
| 函数 | 作用 |
| -------------- | ------------------------------------- |
| wx.switchTab() | 本地路径的跳转一般与navigator标签连用 |
| wx.request() | 向服务器发送异步通信请求 |
| | |
### 全局数据储存
#### 1.`app.globalDate`
在非app.js调用需要先声明`app` 变量
```js
// app.js页面
App({
globalDate:{
user: resp,
}
})
this.globalDate.user
//非app.js页面
const app = getApp();
//修改
app.globalDate.user = Object
//使用
console.log(app.globalDate.user)
```
### 相机
#### 1.`wx.chooseMedia()`函数
```json
wx.chooseMedia({
//选择操作文件数目
count: 9,
//选择文件类型 ‘图片’， ‘录像’， ‘同时都选’
mediaType: ['image', 'video'， ‘mix],
//’从相册选择‘， ‘拍照’
sourceType: ['album', 'camera']
//选择最长拍摄时间
maxDuration: number,
// 是否压缩
sizeType:Array ,
//照相机前置或者后置
camera:['font', 'back'],
success: res=>{
//成功之后的信息处理
}
})
```
#### 2.`wx.uploadFile({})`
```json
wx.chooseMedia({
count:1,
success: res=>{
const tempfilePath = res.tempfilePath;
wx:uplaodFlie({
//服务器地址
url:'https://example.weixin.qq.com/upload'，
// 本地文件路径
filePath: tempFilePaths,
// 文件对应的key
name: 'flie'
//传输的额外数据
formDate:{
'user': object,
}
success(res){
// 成功之后执行的函数
}
file(resp){
// 失败之后的
}
})
}
})
```
| 函数名 | 作用 |
| --------------------------- | --------------------------- |
| wx.getImageInfo() | 获取图片信息成功返回success |
| wx.saveImageToPhotosAlbum() | 将图片保存包图库 |
| wx.showToast() | 消息弹框 |
### 报错信息
**使用`url`进行跳转要用navigator标签**
### 异步回调函数
```js
//原始的使用wx.request({}) 函数
wx.request({
url:'http://localhost:3005/product/findSwiper/',
method:"get",
data:{
},
success:(resp) =>{
this.setData({
swiperList: resp.data,
});
}
})
// 使用promise之后的
//优化代码
export const resultUtil(params){
return new promise((resolve, reject) =>{
wx.request({
...params,
success: resp=>{
resolve(resp);
},
fail: resp =>{
reject(resp);
}
})
})
}
//使用then调用
requestUtil({url: '', method: '', data:{}})
.then(resp =>{})
// 更优雅的
使用esp7 await async
async： function(){
const resp =await requestUtil({url: '', method: '', data:{}})
resp=>{
}
}
```
### async, await, Promise之间的关系
`async`：声明该函数是一个异步函数， 函数会异步执行， 函数会返回一个promise对象可以使用**then**方法添加回调函数， **async**函数的返回值会成为then函数的参数
`await`: 只能在**async**函数内部使用，否则会报错，他的作用是阻塞线程，使得异步函数可以顺序执行函数
### 组件之间的隔离选项
> 注意： 隔离值只有对class生效对组件时不生效的 最好在组件中使用class设置样式
```java
// 在组件的.js 文件中新增加如下配置
Component({
options: {
// 默认值isolated: 代表启动样式隔离
// apply-shared: 代表父页面wxss样式将影响自定义组件
// shared: 代表双向的影响
styleIsolation: 'apply-shared'
}
})
```