小程序初体验

简述

本文简述小程序实现过程，及总结期间遇到问题

需求分析

基于以往抓取空气质量数据，实现微信小程序中展示城市小时、日数据，让公众更便捷了解自己关注城市实时空气质量趋势

主要技术

数据支撑技术

数据抓取 ——> Python
数据存储 ——> Sql Server && Mongodb
数据服务 ——> WebApi

注：抓取、存储、服务均可使用其他 语言 / 软件 替换

小程序实现

前端展示 ——> 微信小程序
UI ——> WeUI
图表插件 ——> wx-charts

实现过程

功能拆分

功能拆分

功能实现

1、基于功能导图，搭建主体目录结构划分

目录结构

2、封装公共数据请求方法，例如数据请求

function fetchData(params) {
  let API_URL = 'https://******/WebApi/api/Query'

  return new Promise((resolve, reject) => { 
    wx.request({
      url: `${API_URL}`,
      data: Object.assign({}, params),
      header: { 'Content-Type': 'json' },
      success: resolve,
      fail: reject
    })
  })
}

3、基于 组件 、WeUI 选择合适模板搭建视图，再切换实际数据源进行调整，语法、绑定、循环、事件等均可参见官方API，可能因之前接触过Vue，感觉比较好上手
4、实现单视图模型后，不断优化整合类似功能、业务视图模型

主要功能流程

经验总结

目前小程序支持个人上传发布，但正式上线，其使用服务必须https

赋值方式

//赋值后视图及时响应
that.setData({
  scene: 'xxx'
})
//赋值后视图不响应
that.data.scene: 'xxx'

体验版分享

1、若https未配置好，可打开开发工具，点击右上角详细，取消不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书验证

image.png

2、开发完成后，可上传至体验版

image.png

3、登录微信公众平台 网页 ，添加待分享人员微信，给予对应权限

成员管理

4、回到开发工具，预览，手机扫码分享或通过小程序开发助手分析均可

https SSL证书

目前腾讯云SSL证书有免费版，可申请后安装至服务器，详细步骤可自行检索

腾讯云SSL证书

小程序名称

目前个人用户发布小程序不支持模糊搜索，英文区分大小写，建议使用简洁中文命名，小程序名称 1 年限制修改 2 次

小程序审核周期

亲测第一次审核周期 5 工作日，第二次审核周期 4 小时，仅供参考