小程序和普通网页开发区别

1. 运行环境不同

• 网页运行在浏览器环境
• 小程序运行在微信环境

2. API不同 -小程序无法调用DOM BOM的API

• 可以使用微信环境提供的API

3. 开发模式不同

• 网页：浏览器加代码编辑器
• 小程序 申请账号->安装小程序开发工具->创建和配置小程序项目

开发工具

1. app.json

• pages:记录当前小程序所有页面路径
• window:全局定义小程序所有页面的背景色、文字颜色等
• style:全局定义小程序组件所使用的样式版本
• sitemapLocation:指明sitemap.json的位置

2. project.config.json

• setting:编译相关的配置
• projectname:项目的名称
• appid:小程序的账号ID

3. 新增小程序页面

• 只需在app.json->pages中新增页面的存放路径，工具自动创建对应的文件

4. 修改项目首页

• 只需要调整app.json->pages数组中页面路径的前后顺序，放在第一的就是项目的首页

5. WXML和HTML的区别

• 标签名称不同 HTML：div,span,img | WXML:view,text,image,navigator
• 属性节点不同 HTML：超链接|WXML:
• 提供了类似Vue的模板语法 数据绑定|列表渲染|条件渲染

6. WXSS和CSS的区别

• 新增了rpx尺寸单位
• 提供了全局样式和局部样式
• WXSS仅支持部分CSS选择器 .class/#id/element/并发选择器，后代选择器/::after /::before 7.小程序宿主环境包含的内容
• 通信模型 渲染层和逻辑层，逻辑层和第三方服务器都是由微信提供的
• 运行机制 1. 下载代码包->解析app.json全局配置文件->执行ap.js小程序入口文件调用app()创建->渲染小程序首页->小程序启动完成
• 组件
• API

WXML模板语法

1. 数据绑定

• 在data中定义数据

page({
	data:{
    	info:'ok',
        msgList:[{msg:'hello'},{mse:'world'}]
    }
})

• 在WXML中使用数据

<view>{{要绑定的数据名称}}</view>

2. 事件绑定

• 常用事件

tap ->bindtap/bind:tap   手触摸后马上离开，类似于HTML中click事件
input ->bindinput /bind:input 文本框输入事件
change->bindchange/bind:change 状态改变时触发

• 修改data的值

changeData(){
	this.setData({
    	number:this.data.number+1
    })
}

• 事件传参

不能再绑定事件的同时为事件传参，tap会寻找引号里函数名字
可以使用data-*传参
*为参数名，=后边为值

3. 常用指令（类似vue）

• {{}}
• wx:if /hidden|v-if/v-show
• v-for :key|wx-for wx:key

4. WXSS模板样式

• rpx尺寸单位
• @import样式导入 5.全局和局部
• 在app开头都是全局声明的
• 在各个页面都是局部使用的

pages-记录当前小程序所有页面的存放路径
window-全局配置小程序窗口的外观
tabBar- 设置小程序底部的tabBar效果
style-s是否启用新版的样式组件

-window -tabBar

数据网络请求

1. 发起GET请求

wx.request({
	url:'https://www.escook.cn/api/get',
    method:'GET',
    data:{
    name:'zx',
    age:25
    },
    success:(res)=>{
    	console.log(res)
    }
})

2.发起POST请求

wx.request({
	url:'https://www.escook.cn/api/post',
    method:'post',
    data:{
    name:'zx',
    age:25
    },
    success:(res)=>{
    	console.log(res)
    }
})

页面导航

1. 声明式导航

2. 编程式导航

• 小程序API

  //跳转tabBar
  gotoMessage(){
  	wx.switchTab({
  	url:'/pages/message/message'
  })
  }
  //跳转非tabBar
  gotoMessage(){
  	wx.navigateTo({
  	url:'pages/info/info'
  })
  }
  //后退导航
  gotoBack(){
  	wx.navigateBack()
  }

小程序生命周期

1. 应用生命周期

• onLaunch 初始化完成时执行，只执行一次
• onShow 小程序启动，或从后台进入前台时触发
• onHide 小程序从前台进入后台时触发

2. 页面生命周期

• onLoad 监听页面加载，一个页面只调用一次
• onShow 监听页面显示
• onReady 监听页面初次渲染完成，一个页面只调用一次
• onHide 监听页面隐藏
• onUnload 监听页面卸载，一个页面只调用一次