winney

├─pages						_____________页面文件夹
│  ├─index					_____________首页
│  │      index.js			_____________首页的逻辑文件
│  │      index.json		_____________首页的配置文件
│  │      index.wxml		_____________首页的结构文件
│  │      index.wxss		_____________首页的样式文件
│  │
│  └─logs					_____________日志 页面
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
└─utils						_____________第三方的工具js(可以删除的)
│       util.js
│  .eslintrc.js
│  app.js					_____________项目的全局入口文件
│  app.json					_____________全局配置文件
│  app.wxss					_____________全局样式文件
│  project.config.json		_____________项目的配置文件  如appid
│  project.private.config.json
│  sitemap.json				_____________微信索引配置文件

sitemap配置用来配置小程序及其页面是否允许被微信索引

app.json

快速新建目录及里面的相关文件

在app.json中的pages属性中，添加"pages/demo/demo"，保存之后，会在pages目录中自动创建demo目录，以及demo.wxml、demo.wxss、demo.js、demo.json

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
],

1	<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

dataset

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

页面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

封装 wx.request方法

utils/request.js：

//request.js
const baseUrl = 'https://www.winney07.cn:8080/'

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method: method,
      data: data,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

const get = (url, data) => {
  return request(url, 'GET', data)
}

const post = (url, data) => {
  return request(url, 'POST', data)
}

export default {
  baseUrl,
  request,
  get,
  post
}

使用

import request from '../../utils/request.js'

// 请求接口，获取数据
async getData() {
    const swiperList = await request.get('shopping/swiper');
    const tabList = await request.get('shopping/good/tabList');
    const goodList = await request.get('shopping/good/getGoodList');
    this.setData({
      swiperList,
      tabList,
      goodList
    })
},

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
    this.getData();
},

父子组件之间传值

父组件：

1	<good-list goodsList="{{goodsList}}"></good-list>

子组件.js：

Component({
  properties: {
    goodsList: {
      type: Array,
      value: []
    }
  },
})

子组件.wxml：

<view class="good-list">
  <block
  wx:for="{{ goodsList }}"
  wx:key="index">
    <good-card class="good-item" i="{{index}}" data="{{item}}"></good-card>
  </block>
</view>

事件监听

传参

goods/category/index：

<van-grid-item 
    use-slot 
    class="grid-item" 
    data-groupid="{{item.groupId}}" 
    bindtap="toList">
    
    .....
    .....
    .....
</van-grid-item>

toList(event) {
    console.log('event');
    console.log(event.currentTarget.dataset);		// {groupid: "249480"}
    let groupid = event.currentTarget.dataset.groupid;
    wx.navigateTo({
      url: `/pages/goods/list/index?groupid=${groupid}`
    })
},

在元素中自定义的data-属性，在event.currentTarget.dataset中。

获取URL传来的参数：

goods/list/index.js：

onLoad(options) {
    console.log('options'); 
    console.log(options);      // {groupid: "249480"}
},

微信小游戏

微信小游戏账号注册教程

在微信开发者中，创建小游戏项目，进入项目后，界面是黑色的。

需要注册个测试号（这个测试号是针对小游戏的）

开发测试号
申请小程序测试号
在微信开发中创建小游戏项目时，选择”测试号“，进入项目，即可正常显示

微信公众平台用户信息相关接口调整公告

报错信息

微信小程序编译遇到 ReferenceError: regeneratorRuntime is not defined 解决办法

解析方法：

打包前，在js文件中加入

1	import regeneratorRuntime from "./runtime"

在地图上显示当前位置

在.json页面中进行配置permission

{

    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
        }
    }
}

获取位置

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
    console.log('维度')
    console.log(latitude)
    console.log('经度')
    console.log(longitude)
  }
})

微信开发者工具-关闭声音

Vue项目处理跨域请求

发表于 2020-12-14 更新于 2024-10-30 分类于前端开发框架， Vue.js

1、设置配置文件

方法一：在根目录中新建vue.config.js文件

module.exports = {
    runtimeCompiler: true,
    devServer: {
        proxy: {
            // 匹配请求路径中的字符，
            // 如果符合就用这个代理对象代理本次请求，路径为target的网址，
            // changeOrigin为是否跨域，
            // 如果不想始终传递这个前缀，可以重写路径
            // pathRewrite为是否将指定字符串转换一个再发过去。
            '/api': {
              target: 'http://ttapi.research.itcast.cn/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

方法二：在根目录中，新建config>index.js文件

module.exports = {
    dev: {
        proxyTable: {
            '/api': {
              target: 'http://ttapi.research.itcast.cn/', // 接口的域名
              secure: false, // 如果是https接口，需要配置这个参数
              changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
              pathRewrite: {
                '^/api': '' // '/api/a/user' =='localhost:8080/user'
              }
            }
        }
    }
}

2、axios请求方法的写法：

axios.get('http://ttapi.research.itcast.cn/app/v1_0/comments', {
    params: {
        type: 'a',
        source: this.source,
        offset: this.offset,
        limit: this.limit
    }
})
.then(function (response) {
    console.log('response')
    console.log(response)
})
.catch(function (error) {
    console.log(error)
})

name属性是父组件传过来的，除了数组，对象，其他都不允许修改

props里面的数据，除了数组，对象，其他都不允许修改，所以不能用于页面元素的v-model属性中，因为v-model是双向绑定的

<van-field
   v-model="localName"
   ...
/>
 props: {
     name: {
         type: String,
         required: true
     }
 },
 
data () {
  return {
      localName: this.name
  }
 },

当传递给子组件的数据既要使用又要修改，这种情况下我们可以使用v-model简写：

例如：父组件的name

1 2	:name="user.name" @update-name="user.name=$event"

修改为：

1	v-model="user.name"

子组件也要跟着修改：

props: {
    value: {
        type: String,
        required: true
    }
},

this.$emit('input', this.localName)

v-model=”user.name”

默认传递一个名字叫value的数据：：value=”user.name”

默认监听input事件: @input=”user.name=$event”

v-model的本质还是父子组件通信，它仅仅是简化了父组件的使用，子组件还是按照原来那样使用

注：在同一个子组件传递中，v-model只能使用一次

这样是错误的：
<update-name
    v-model="user.name"
    v-model="user.photo"
/>

在同一个子组件传递中，v-model只能使用一次，如果有多个数据需要保持同步，使用.sync修饰符

<update-name
    v-model="user.name"
    :gender.sync="user.photo"
/>

注：我们一般把最常用的数据设计为v-model绑定，把不太常用的数据设计为.sync

销毁组件的一种方法：

1、加上v-if来控制渲染

<update-name
    v-if="isEditNameShow"
    v-model="user.name"
    @close="isEditNameShow=false"
/>

在Vue中操作DOM，要给该元素添加ref属性

例如：点击头像，选择图片来修改头像

1、给input file添加ref属性

<input type="file" hidden ref="file">
<van-cell title="头像" is-link center @click="$refs.file.click()">
    <van-image
        width="30"
        height="30"
        round fit="cover"
        :src="user.photo"
    />
</van-cell>

2、控制选择的文件类型：accept属性

1	<input type="file" hidden ref="file" accept="image/*">

3、监听文件的change事件

<input
    type="file"
    hidden
    ref="file"
    accept="image/*"
    @change="onFileChange"
>

4、解决选择相同文件不触发change事件,手动清空file的value值

onFileChange() {
    ....
    
     // 手动清空file的value值
     this.$refs.file.value = ''
}

5、展示弹出层，在弹出层预览图片

onFileChange() {
     // 展示弹出层
     this.isEditPhotoShow = true

    //  在弹出层预览选择的图片
    const blod = window.URL.createObjectURL(this.$refs.file.files[0])
    this.previewImage = blod

     // 手动清空file的value值
     this.$refs.file.value = ''
 }

6、父传，子收。并展示预览图片

父传：
<update-photo
    :image="previewImage"
/>
子收：
 props: {
     image: {
         type: String,
         required: true
     }
 },
 
<div class="update-photo">
     <img :src="image">
</div>

7、修改父子组件传值的文件格式

如果Content-Type 要求是 multipart/form-data，则一定要提交FormData数据对象，专门用于文件上传的，不能提交{}对象，没用

所以要修改父组件传过来子组件的文件格式，保留原来的文件格式：

父组件：
onFileChange() {
    ....
    const blod = this.$refs.file.files[0]
    this.previewImage = blod
	....
 }
 
<update-photo
    :file="previewImage"
    @close="isEditPhotoShow=false"
/>
子组件：
 props: {
     file: {
        //  type: String,
         required: true
     }
 },
 data () {
  return {
      image: window.URL.createObjectURL(this.file)
  }
 },

8、处理接口传参

// 文件格式处理
 const fd = new FormData()
 fd.append('photo', this.file)
 // photo为参数名，this.file为参数值

 await updateUserPhoto(fd)

9、处理图片裁切，使用 cropperjs 这个跟vue没有关系，其他项目也可以使用）也可以在Awesome 中搜crop找裁切工具

1、安装

1	cnpm install cropperjs

2、引入

1 2	import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs'

3、使用：放在mounted里面

<img :src="image" ref="image">

mounted() {
    const image = this.$refs.image
    const cropper = new Cropper(image, {
        viewMode: 1,
        dragMode: 'move',
        aspectRatio: 1,
        // autoCropArea: 1,
        cropBoxMovable: false,
        cropBoxResizable: false,
        background: false,
        movable: true
    })
    console.log(cropper)
},

4、让裁切区居中显示

.update-photo{
    position: absolute;
    top: 50%;
    margin-top: -185px;
    margin-left: -185px;
    height: 370px;
    left: 50%;
    width:370px;
}

5、获取裁切结果，getCroppedCanvas()

 data () {
  return {
      image: window.URL.createObjectURL(this.file),
      cropper: null
  }
 },

使用Promise返回一个裁切对象，用于async
 getCroppedCanvas() {
     return new Promise(resolve => {
     // 因为cropper定义在mounted中，在这里无法使用，
     	为了能够在这里能调用cropper，将cropper放在data中
          this.cropper.getCroppedCanvas().toBlob((file) => {
            resolve(file)
        })
     })
 },
 
getCroppedCanvas返回的Promise对象，在这里面使用：
async onConfirm() {
     .....
     const file = await this.getCroppedCanvas()
     const img = window.URL.createObjectURL(file)

    // 文件格式处理
     const fd = new FormData()
     fd.append('photo', file)
     
     await updateUserPhoto(fd)

     this.$emit('close')
     this.$emit('update-photo', img)

     this.$toast.success('保存成功')
 }

Clipboard的使用

发表于 2020-11-04 更新于 2024-10-30 分类于前端插件， Clipboard

如果存在clipboard,先将它销毁

1
2
3

if(clipboard) {
    clipboard.destroy();
}

Clipboard官网使用教程

复制成功和复制失败的提示

var u = navigator.userAgent;
clipboard.on('success', function(e) {
    layer.msg('复制成功', {time: 1000});
    e.clearSelection();
});
clipboard.on('error', function(e) {
    if(u.indexOf('UCBrowser') > -1){
        layer.msg('您的浏览器不支持，请长按内容手动复制！', {time: 1000});
    } else {
        layer.msg('复制失败', {time: 1000});
    }
});

如果提示信息弹两次

自己写一个copySuccessTip提示信息
$(".copySuccessTip").addClass("mymove");
setTimeout(function() {
    $(".copySuccessTip").removeClass("mymove");
},1000);

解决clipboard复制弹多次提示的问题

1、使用destroy（在单页面里面，回来页面，如果存在这个对象，就删除。）

// 如果存在clipboard，先将它销毁
if(clipboard){
	clipboard.destroy();
}

var clipboard =new ClipboardJS('.copyBtn', {
	text: function(trigger){
		var txt = $(trigger).data( "clipboard-text");
		return txt;		//	返回需要复制的内容
    }
});

var u = navigator.userAgent;

clipboard.on('success', function(e){
	layer.msg('复制成功');
	e.clearselection();
});

clipboard.on('error', function(e) {
	if(u.indexOf("UCBrowser") >-1){
		layer.msg('您的浏览器不支持，请长按内容手动复制!');
	}else {
		layer.msg('复制失败');
	}
});

2、换成setTimeout，不用layer.msg（copySuccessTip的样式模拟layer.msg的样式即可）

clipboard.on('success', function(e){
	$('.copySuccessTip').show();
	
	setTimeout(function(){
		$('.copySuccessTip').hide();
	}, 1000);
});