关于微信小程序的二三事（技术篇）

时间 2019-12-05

标签关于微信程序二三技术繁體版

原文原文链接

开发环境以及demo:

参见官方文档，注册->安装开发工具->新建项目，demo就跑起来了。javascript

这一步比较简单，按照提示一步步安装好就行，而后用微信扫描二维码登录。至此小程序的开发环境差很少完成。php

代码构成

pagescss
- indexhtml
  - index.js
  - index.wxml
  - index.wxss
- logsvue
  - logs.js
  - logs.json
  - logs.wxml
  - logs.wxss
utilsjava
- utils.js
app.js
app.json
app.wxss
project.config.json

文件详解

app.json是对当前小程序的全局配置，包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等。demo 项目里的 app.json 配置内容以下：webpack
```
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
```
咱们简单说一下这个配置各个项的含义:git
- pages字段 —— 用于描述当前小程序全部页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪一个目录。
- window字段 —— 小程序全部页面的顶部背景颜色，文字颜色定义在这里的。
  详细配置能够参考：小程序的配置 app.json
project.config.json，开发工具自己个性化配置，好比界面颜色、编译配置等。其余配置项细节能够参考文档开发者工具的配置。
page.json，其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
若是你整个小程序的风格是蓝色调，那么你能够在 app.json 里边声明顶部颜色是蓝色便可。实际状况可能不是这样，可能你小程序里边的每一个页面都有不同的色调来区分不一样功能模块，所以咱们提供了 page.json，让开发者能够独立定义每一个页面的一些属性，例如刚刚说的顶部颜色、是否容许下拉刷新等等。github

其余配置项细节能够参考文档小程序的配置page.json。web
```
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
```

4.wxml和wxss，其实就是扩展了的html和css，加入一些相似 wx:if 这样的属性以及 {{ }} 这样的表达式，配合js来管理状态。和vue一模一样，写过模板引擎的同窗也能够很快上手。

小程序能力

这一章实际是你们都比较关心的，到底小程序能调用微信的哪些能力。参见小程序的API 。
例如：

请求：

wx.request({
  url: 'test.php', 
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }

须要注意的是小程序只能请求https的接口，开发模式下能够打开详情 - 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书来调试http请求。

多线程
createWorker相似HTML5的webworker，能够作一些计算相关的事

唤起app
launchApp(OBJECT)
须要注意的是，并不能经过api调用来唤起app，只能听经过用户手动触发。并且只能跳回分享该页面的app。以下图

获取位置 ：

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

open-data，用于展现微信开放的数据，例：王者荣耀群排名

还支持canvas和地图，能够作不少有意思的东西。

热更新，h5

由于要走小程序的审核，因此实现热更新的方法只有依靠webview了，并且webview有和小程序页面同样的history，并且没有小程序只能嵌套5层页面的限制，不过只有企业应用才可使用，可是不妨碍在开发模式下体验。webview组件

推送

模板消息
可使用消息模板，可是有必定的限制：

下发条件说明

支付
当用户在小程序内完成过支付行为，可容许开发者向用户在7天内推送有限条数的模板消息（1次支付可下发1条，屡次支付下发条数独立，互相不影响）

提交表单
当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的，开发者须要向用户提供服务时，可容许开发者向用户在7天内推送有限条数的模板消息（1次提交表单可下发1条，屡次提交下发条数独立，相互不影响）

违规说明
除不能违反运营规范外，还不能违反如下规则，包括但不限于：

不容许恶意诱导用户进行触发操做，以达到可向用户下发模板目的
不容许恶意骚扰，下发对用户形成骚扰的模板
不容许恶意营销，下发营销目的模板

整体而言，小程序的通知限制仍是不少的。下面是一个通知的例子：

转发按钮

转发文档
能够在页面内安放一个转发按钮

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
})

追求开发体验

wepy是一套类vue.js体验的框架：

类Vue开发风格
支持自定义组件开发
支持引入NPM包
支持Promise
支持ES2015+特性，如Async Functions
支持多种编译器，Less/Sass/Stylus、Babel/Typescript、Pug
支持多种插件处理，文件压缩，图片压缩，内容替换等
支持 Sourcemap，ESLint等
小程序细节优化，如请求列队，事件优化等

mpvue更进一步，整套vue.js的开发模式，目标是使用一套代码跑在多端包括WEB、小程序（微信和支付宝）和 Native（借助weex）

完全的组件化开发能力：提升代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力

关于小程序的一些其余感想，我写在了这里