小程序依赖微信

1.快，因为免去下载和安装

2.小，一个包不能超过2M

3.强,微信有什么能力它也拥有

4.广,传播微信圈子近10亿用户

1.注册开发者帐号

注册小程序帐号https://mp.weixin.qq.com/

2.下载微信开发者工具

稳定版 Stable Build | 微信开放文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.微信开发文档

微信开放文档https://developers.weixin.qq.com/miniprogram/dev/framework/

1、app.json

pages 存放项目的页面

哪个页面在最前面，哪个页面是默认页面

window 项目的窗口

"backgroundTextStyle": "light", 背景文字:light|dark

"navigationBarBackgroundColor": "#000", 导航栏背景颜色

"navigationBarTitleText": "BLACK", 导航栏标题

"navigationBarTextStyle": "white" 导航栏文字颜色:white|black

tabBar 底部栏的配置

  "tabBar": {

    "color": "#484848",

    "selectedColor": "#109fef",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "语法",

      "iconPath": "/images/index.png",

      "selectedIconPath": "/images/index.png"

    }]

  },

color 文字默认颜色

selectedColor 文字选中颜色

list 页面列表：

        pagePath 页面地址

        text 文本

        iconPath 图标地址

        selectedIconPath 选中图标地址

2、页面.json

"usingComponents": {} 使用组件

"navigationBarTitleText": "基础语法" 标题

"enablePullDownRefresh": true 允许下拉刷新

"backgroundColor": "#eee" 背景颜色

"backgroundTextStyle": "dark" 背景文字颜色

例子： 逻辑视觉分区(div)

文本(span)如 图片组件（常用）

src 图片地址

mode 模式：

scaleToFill:不保持宽高比,缩放

aspectFit:保持宽高比,长边优先

aspectFill:保持宽高比,短边优先

widthFix:宽不变,高自动

heightFix:高不变,宽自动

left right top bottom center:显示局部

条件渲染

wx:if="{{条件}}"

多重条件渲染

wx:elif="{{多重条件}}"

wx:else

文本渲染

placeholder="{{msg}}"  属性的渲染

列表渲染

{{index}}.{{item}}

自定义列表渲染

多层for循环 定义名称

{{myindex}}.{{myitem}}

注意：key值自动解构。eg：若想使用item.docid做为key，wx:key="docid"即可

模板

定义:

用户名：{{name}}

导入：只能导入template

使用：

引入

相当于把src的内容拷贝一份放在当前位置，不能导入template

事件方法

bindTap 点击

bindconfim 确认

bindchange 表单值发生变化

bindinput 表单输入

普通事件

调用方法：

事件

自定义方法：

showMsg(){}

事件传参

定义参数：

小程序

在方法中获取参数：

showMsg(e){

  let msg=e.currentTarget.dataset.msg;

  wx.showToast({

    title: 'hello '+msg,

    icon:"loading"

  })

}

表单：

定义方法更新视图和data：

changeHd(e){

  let msg=e.detail.value;

  this.setData({msg})

}

js方法里data数据：this.data.msg

在wxml使用：{{msg}}

更新data与视图：this.setData({key1:value1,key2:value2})

注意：this指向,在wx.xxx api里面this的wx这个对象不是当前页面

十、微信api（https://developers.weixin.qq.com/miniprogram/dev/api/）

Page参数

data 存储数据

onload() 当页面加载中

onPullDownRefresh 下拉刷新回调函数

onReachBottom 触底回调函数

wx.xxx

wx.stopPullDownRefresh();  停止下拉刷新

wx.showToast({})  轻提示

wx.request({url,method,success(){}}) 网络请求：

默认请求地址需要在后端配置

默认请求地址要求https