小程序开发

小程序和网页的不同点

无法调用DOM，BOM 但可以调用各种API 例如：地理位置，扫码，支付

申请账号

AppID : wx4bf83b32319f6471

安装开发工具devtools

代码编辑调试
预览发布

创建和配置小程序项目

宿主环境

程序运行所依赖的环境IOS,Android

微信就是小程序的宿主环境

同行模型
运行机制
- 启动过程
- app.json
- app.js 调用App()函数创建实例
- 渲染首页
- 启动完成
组件
- 视图容器
  - view(div)
  - scroll-view() 滚动区域
  - swiper和swiper-item 轮播图
- 内容组件
  - text(span)
  - rich-text
  - button
  - image
    - 图片
  - navigator
    - 导航
API
- 事件监听
  - on开头，监听某些事件的触发
  - 例如：wx.onWindowResize(function,callback)
- 同步
  - 以Sync结尾
  - wx.setStorageSync(‘key’,value)向本地存储写入内容
- 异步
  - 类似于$.ajax(options)函数，须通过success,fail,complete接受调用结果
  - wx.request()发起网络请求，通过success回调函数接受数据

小程序的版本

开发版本
体验版本
审核中的版本
线上版本

发布上线

WXML 模板语法

Mustache语法
- 动态绑定内容：{{}}
- 图片：</image>
事件
- tap(触摸click) bindtap/bind:tap
  - 事件传参：data-xx={{}}
- input bindinput/bind:input
- change bindchange/bind:change 状态改变如checkbox
条件渲染
- wx:if 动态创建和移除
- 不会被渲染
- hidden={{condition}} 显示与隐藏相当于display:none/block
- wx:for wx:key
wxss
- rpx尺寸单位
  - 1px=2rpx
  - 所有设备的宽度等分为750份
- @import样式导入
- 局部样式大于全局样式（权重）

全局配置

app.json
下拉刷新
- “enablePullDownRefresh”: true
上拉触底
- “onReachBottomDistance”: 0
tabBar
- 最少两个，最多五个
- 顶部
  - 没图标
- 底部
  - 有图标
- backgroundColor
- slectedIconPath 选中
- borderStyle
- iconPath 未选中
- selectedColor 选中时文本的颜色
- color 默认颜色

页面配置

"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "消息",
"backgroundColor": "#ffffff",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false

网络请求数据

配置request合法域名

wx.request({
      url: 'url',
      method:'POST',
      success:(res)=>{
        console.log(res.data);
      }
    })

跳过request合法域名校验

没有跨域和ajax请求，只是网络请求

案例

配置导航栏
配置tabBar
实现轮播图
实现九宫格
实现图片布局

页面导航

声明式：navigator
- url：必须以\开头
- 跳转到tabBar需加open-type="switchTab"
- 非tabBar页面需加open-type="navigate"
- 后退open-type="navigateBack"
编程式：API
- tabBar：wx.switchTab({url=’’})
- 非tabBar：wx.navigateTo({url=’’})
- 后退：wx.navigateBack()