微信公众号及小程序

微信小程序

1、简单描述下微信小程序的相关文件类型？

主要有四个文件类型,如下
    ①.json 后缀的 JSON 配置文件
    ②.wxml 后缀的 WXML 模板文件
    ③.wxss 后缀的 WXSS 样式文件
    ④.js 后缀的 JS 脚本逻辑文件
WXML （WeiXin Markup Language）
    是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
    内部主要是微信自己定义的一套组件。
WXSS (WeiXin Style Sheets)
    是一套样式语言，用于描述 WXML 的组件样式，
json
    小程序设置，如页面注册，页面标题及tabBar。
js
    逻辑处理，网络请求
    
app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。
包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab，以及小程序的window背景色，配置导航条样式，配置默认标题。

2、请谈谈wxml与标准的html的异同？

①都是用来描述页面的结构；都由标签、属性等构成；
②标签名字不一样，且小程序标签更少，单一标签更多；
③多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
④WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
⑤组件封装不同， WXML对组件进行了重新封装，
⑥没有DOM树和window对象，小程序中无法使用window对象和document对象。

3、请谈谈WXSS和CSS的异同？

①都是用来描述页面的样子；
②WXSS 具有 CSS 大部分的特性，仅支持部分 CSS 选择器，但是没有明确的官方说明。
③WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
④WXSS 提供全局样式与局部样式。

4、怎么封装微信小程序的数据请求的？

①在根目录下创建utils目录再创建api.js文件；
②在api.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；
③在api.js中设置对应的方法调用上面封装好的请求方法并导出；当然可以使用两个文件，在同一个文件显示更加直观。
④在具体的页面中导入；

ES5-module.exports/require
ES6语法-export/import

5、小程序页面间有哪些传递数据的方法？

①使用全局变量实现数据传递 app.js定义globalData对应的全局变量
②页面跳转或重定向时，使用url带参数传递数据
wx.navigateTo({
  url: 'some/some?id=' + event.target.id,
})
onLoad: function (options) {
  console.log(options)
},
③使用组件模板 template传递参数
<component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"></component-tag-name>
④使用缓存传递参数
wx.setStorage({
  key: 'userInfo',
  data: res.userInfo
})
⑤使用数据库 -- 发送请求

6、小程序的双向绑定和vue的异同？

大体相同，小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法
扩展--语法异同, 
①vue属性值不需要大括号，微信小程序属性值需要大括号；vue使用 “-”，微信小程序使用 “:”
②v-if、v-else-if、v-else == wx:if、wx:elif、wx:else
③v-for="(itemNameAnyway, key, index) in arr" v-bind:key="item.id"//:key="item.id"
wx:for="{{items}}"  wx:key="itemName" wx:for-index="idx" wx:for-item="itemName"
wx:key值在for循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名
④事件绑定
 v-bind、@
 bindtap、catchtap...

7、小程序的生命周期函数？

onLoad() 页面加载时触发，只会调用一次，获取当前页面路径中的参数。
onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

9、使用过哪些方法，来提高微信小程序的应用速度

①减少默认data的大小
②组件化方案
③提高页面加载速度

详情链接


8、微信小程序原理？

①本质就是一个单页应用，所有的页面渲染和事件处理，都在一个页面内进行，同时又可以通过微信客户端调用原生的各种接口；
②是数据驱动的架构模式，UI和数据是分离的，页面更新需要更改数据来实现；
③从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
    (HTML结构层、CSS表示层、JS行为层。)
④功能可分为webview和appService两个部分；webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；

10、小程序与原生App哪个好？

①小程序拥有公众号的低开发成本、获客成本低以及无需下载，通过搜索和扫一扫就可以打开。
②页面大小不能超过1M。不能打开超过5个层级的页面。
③样式单一。小程序的部分组件已经是成型的了，样式不可以修改。
④依托于微信。

11、微信小程序与H5的区别？

①运行环境的不同--
    HTML5运行环境是浏览器；
    微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，配合自己定义的开发语言标准，
②开发成本的不同--只在微信中运行，所以不用再去顾虑浏览器兼容性
③获取系统级权限的不同--系统级权限都可以和微信小程序无缝衔接

微信小程序
微信小程序支付API

wx.requestPayment({
    'timeStamp': '', // 时间戳
    'nonceStr': '', // 随机字符串
    'package': '', // 数据包
    'signType': 'MD5', // 签名类型，默认为MD5，
    'paySign': '', // “签名算法”说明
    'success':function(res){},
    'fail':function(res){},
    'complete':function(res){}
})

paySign = MD5(appId=wxd678efh567hg6787&
nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&
package=prepay_id=wx2017033010242291fcfe0db70013231072&
signType=MD5&
timeStamp=1490840662&
key=qazwsxedcrfvtgbyhnujmikolp111111) = 22D9B4E54AB1950F51E0649E8810ACD6
微信小程序-扫码
wx.scanCode
微信小程序-从本地相册选择图片或使用相机拍照

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

微信小程序-上传

wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        const data = res.data
        // do something
      }
    })
  }
})

微信小程序开发文档

微信公众号

微信JS-SDK说明文档
微信网页授权-获取用户基本信息

1、引导用户进入授权页面同意授权，获取code
2、通过code换取网页授权access_token（与基础支持中的access_token不同）
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和openid获取用户基本信息

JS-SDK使用步骤

①绑定域名
②引入JS文件
    [js1-支持https][9]
    [js2-支持https][10]
③通过config接口注入权限验证配置
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

调起微信扫一扫接口

wx.scanQRCode({
    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
    }
});

发起一个微信支付请求

wx.chooseWXPay({
    timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: '', // 支付签名随机串，不长于 32 位
    package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
    signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: '', // 支付签名
    success: function (res) {
        // 支付成功后的回调函数
    }
});

微信支付开发文档
拍照或从手机相册中选图

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

预览图片接口

wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
});

上传图片接口

wx.uploadImage({
    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
    }
});

使用微信内置地图查看位置接口

wx.openLocation({
  latitude: 0, // 纬度，浮点数，范围为90 ~ -90
  longitude: 0, // 经度，浮点数，范围为180 ~ -180。
  name: '', // 位置名
  address: '', // 地址详情说明
  scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

获取地理位置接口

wx.getLocation({
    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    success: function (res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
    }
});

自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

wx.ready(function () {      
    //需在用户可能点击分享按钮前就先调用
    wx.updateTimelineShareData({ 
        title: '', // 分享标题
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
    })
});

判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function(res) {
    // 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

④
⑤
⑥
①
②
③
④
⑤
⑥

1
2
3
其他经典技术点正在收集