您当前的位置：主页 > 技术探讨 >

h5手机端公众号配置 手机图片调用

时间：2019-06-10 14:28 日记人：arlen.zhou

手机获得相机图片的方式：

<input type="file" capture="camera" accept="image/*" multiple>，这句html大家应该都知道是用来在手机端或者pc端上传多张图片的情况下使用的，

现在我们着重来分析下，每个属性，以及新出的新特性的特点，后面会附上不同属性的demo测试。
 
在 上面的HTML 的属性中，capture 的主要作用是捕获，对于移动端中就是开启摄像头了。如果没有这个属性就将会变成一个简单的上传文件按钮。
 
capture 开启摄像头来获取视频（音频？）或者照片（图片），值有camera和新出来的user；
accept 允许通过 input[type="file"] 上传的文件类型：
accept="audio/*" 上传音频（iOS中没测试成功，就放弃了）；
accept="video/*" 上传视频；
accept="image/*" 上传图片；
multiple 允许上传多个文件；



微信公众号  ：

环境配置软件

Fiddler.exe    微信开发者工具


微信验证接口获取code 

 let url_dev = 'http://dev.medichains.cn/index'
 let redirect_uri = encodeURIComponent(url_dev);
 //静默
 //let codeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
 //非静默
 let codeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"

hosts文件配置

  C:\Windows\System32\drivers\etc   hosts  

package.json
 
 "scripts": {
    "dev": "webpack-dev-server --disableHostCheck=true --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js"
  },