官网：mp.wx.qq.com

特点

1. 小程序是依赖微信
2. 快，应为免去下载和安装
3. 小，一个包不能超过2M
4. 强:微信有什么能力它也拥有
5. 广，传播微信圈子近10亿用户
6. QQ 微信 支付宝，字节跳动，美团，鸿蒙都有类似的小程序

配置文件（app.json）

存放项目的页面pages

1. 哪个页面在最前面
2. 哪个页面是默认页面

项目的窗口window

"backgroundTextStyle": "light",
背景文字
"navigationBarBackgroundColor": "#f30",
导航栏背景颜色
"navigationBarTitleText": "猫不吃鱼",
导航栏标题
"navigationBarTextStyle": "white"
导航栏文字颜色：white|black

小程序页面

home.js //业务逻辑
home.wxss //样式
home.wxml //模板
home.json //配置

页面.json

 "navigationBarTitleText"="基础语法"
  单独对某个页面的配置

底部栏的配置 tabBar

"tabBar": {
    "color": "#484848",
    "selectedColor": "#16a5e7",
    "list": [{
      "pagePath": "pages/base/base",
      "text": "语法",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }    
  ]
  },

color 文字末让颜色
selectColor 文字选中颜色
list 页面列表

pagePath页面地址
text文本
iconPath 图标地址
selectedIconPath 选中图标地址

事件

自定义方法
showMsg(){
},	

在方法里面获取参数
showMsg(e){
   let msg = e.currentTarget.dataset.msg
  wx.showToast({
   title:msg,
   icon:"error"
  })
}

表单的双向绑定

<input value=“{{msg}}” bindinput=“changeHd”>

定义方法更新视图与data
function changeHd(e){
    //获取表单的值
   let msg = e.detail.value;
   // 更新视图和data
   this.setData({msg})
}

事件

bindtap点击
bindcomfim 确认
bindchange表单值发生改变
bindinput表单输入

微信api wx.xxx

wx.stopPullDownRefresh()
停止下拉刷新

wx.showToast
吐司提示

wx.request(url,methd,success(){})
网络请求
默认请求地址需要在后端配置
默认请求地址要求https

配置文件

"navigationBarTitleText": "爱笑话",
标题颜色
"enablePullDownRefresh": true,
允许下拉刷新
"backgroundTextStyle": "dark",
背景文字颜色
"backgroundColor": "#f30",
背景颜色
"usingComponents": {}
使用组件

Page参数

data存储数据
onload() 当页面加载完毕
onPullDownRefresh 下拉刷新回调函数
onReachBottom 触底回调函数
自定方法

data与更新

js 里面方法data数据
this.data.msg
在wxml使用
{{msg}}
更新data与视图
this.setData({key:value,key2:value2})
注意this指向，在wx.xxxapi里面this 的wx这个对象不是当前页面