微信公众号及小程序

weixiaocheng

2019-07-01

微信小程序

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
      }
    })
  }
})

微信小程序开发文档