微信小程序测试体验、发布

image.png

微信小程序helloword--官方

image.png

例如，你需要在界面上显示地图，你只需要这样写即可：

<map></map>
使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现，例如，我们希望地图一开始的中心的经纬度是广州，那么你需要声明地图的 longitude（中心经度） 和 latitude（中心纬度）两个属性:

<map longitude="广州经度" latitude="广州纬度"></map>

浏览器中JavaScript 构成
NodeJS中JavaScript 构成 小程序中 JavaScript 构成如图

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

微信小程序框架--官方

微信小程序框架接口-官方同上

image.png

微信小程序开发工具--使用介绍

image.png 可视化 image.png

理解小程序宿主环境

小程序开放平台--管理

image.png

微信小程序SSL证书用于HTTPS协议方法

微信小程序获取用户unionId

页面跳转数据传递

我们只需要实现一个商品详情页的pages/detail/detail.(代表WXML/WXSS/JS/JSON文件)即可，在列表页打开商品详情页时把商品的id传递过来，详情页通过刚刚说的onLoad回调的参数option就可以拿到商品id，从而绘制出对应的商品，代码如代码清单3-9所示。

// pages/list/list.js
// 列表页使用navigateTo跳转到详情页
wx.navigateTo({ url: 'pages/detail/detail?id=1&other=abc' })

// pages/detail/detail.js
Page({
  onLoad: function(option) {
        console.log(option.id)
        console.log(option.other)
  }
})

补充一下，wx.navigateTo和wx.redirectTo只能打开非TabBar页面，wx.switchTab只能打开Tabbar页面。
我们还可以使用 wx. reLaunch({ url: 'pageH' }) 重启小程序，并且打开pageH，此时页面栈为 [ pageH ]。

微信小程序 api

页面跳转、tab页切换等、前后台事件、网络请求、文件下载、上传、websocket、微信支付、数据缓存、地图、登陆、账户信息等
微信小程序 api

小程序调试

小程序调试

image.png

wx.getUserInfo({complete:function(res){console.log(res)} })

image.png

API Mock

Mock 的入口在工具调试面板顶部的 Tab，点 + 新建规则

image.png

小程序自动化

小程序自动化

云开发官方文档

从0开始使用小程序云开发

小程序前端+前端开发实战

小程序前端+服务端后台连通实战

=========1：理解好路由页面；2：抽取公共试图（wxml文件使用include、wxss使用import） 3：测试某个页面时，调整app.json中的pages顺序
弹性布局（display:flex;）属性详解

flex container简介 flex container属性

登陆授权

image.png image.png

open-data 的特殊