1.小程序与普通网页开发的区别

graph TD
小程序与普通网页开发的区别  --> 运行环境不同
小程序与普通网页开发的区别  --> API不同
小程序与普通网页开发的区别  --> 开发模式不同

2.小程序项目基本结构

pages 用来存放所有的小程序的页面

utlis 用来存放工具性质的模块

app.js 小程序项目的入口文件

app.json 小程序项目的全局配置文件

app.wxss 小程序项目的全局样式文件

project.config.json 项目的配置文件

sitemap.json 用来配置小程序及其页面是否允许被微信索引

3.WXML和WXSS

WXML和HTML的区别:

1.标签名称不同

2.属性节点不同

3.提供了类似于vue中的模板语法

WXSS和CSS的区别:

1.新增了rpx尺寸单位

2.提供了全局的样式和局部样式

3.WXSS仅支持部分CSS选择器

4.小程序的宿主环境

宿主环境,指的是程序运行所必须的依赖环境.

小程序的宿主环境依赖于微信

1.通信模型

2.运行机制

3.组件

4.API (事件监听API/同步API/异步API)

5.WXML模板语法

1.数据绑定(Mustache语法)

2.事件绑定(bindtap/bindinput/bindchange)

3.事件传参与数据同步(this.setData中修改原数据;传参使用data-*="",e.target.dataset.*接收)

4.条件渲染(wx:if/hidden;使用block包裹不会被渲染出标签)

5.列表渲染(wx:for/wx:for-index=""/wx:for-item="")

6.tabBar配置

backgroundColor 背景色

selectedlconPath 选中时的图片路径

borderStyle 上边框的颜色

iconPath 未选中时的图片路径

selectedColor 文字选中时的颜色

color 文字未选中的颜色

7.小程序中网络数据请求的限制

1.只能请求HTTPS类型的接口

2.必须将接口的域名添加到信任列表中

跳过 request 合法域名校验

如果后端只提供了http协议的接口,暂时没有提供https协议的接口,可以在小程序开发者工具的本地设置中,开启不检验合法域名.项目上线时,需要开启并更换接口.

关于跨域和Ajax的说明

跨域问题只存在于浏览器的web开发中,小程序的宿主环境是微信客户端,所以不存在跨域的问题.

Ajax技术的核心是依赖于浏览器中的XMLhttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做"发起Ajax请求",而是叫做"发起网络数据请求"

8.导航的跳转和传参

声明式导航

<navigator url="/pages/index/index" open-type="switchTab">跳转tabBar页面</navigator>
<navigator url="/pages/homo/homo" open-type="navigate">跳转非tabBar页面</navigator>
<navigator open-type="navigateBack" delta="1">后退</navigator>

注意点：跳转时url路径开头必须加上‘/’

编程式导航

wx.switchTab({url: '/pages/index/index',}) 跳转tabBar页面
wx.navigateTo({url: '/pages/homo/homo',}) 跳转非tabBar页面
wx.navigateBack() 后退

注意点：delta="1"是默认值，不加也可以

导航传参

url="/pages/index/index?name='张三'& age=18"

参数与路径之间使用？分割，参数与参数值用 = 相连，不同参数用 & 分隔

9.下拉刷新和上拉加载配置

下拉刷新

"enablePullDownRefresh": true, 开启下拉刷新
"backgroundColor": "#f45634",  设置背景颜色
"backgroundTextStyle": "dark"  设置loading的样式,仅支持dark和light
 // 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
     this.setData({
       msg:0
     })
     wx.stopPullDownRefresh() 停止下拉刷新
  },

上拉加载

"onReachBottomDistance": 200 默认触底距离是50
 // 页面上拉触底事件的处理函数
 onReachBottom() {
     console.log('上拉事件触发了---');
  },
  wx.showLoading({title: '数据加载中...',}) 开启loading效果
  wx.hideLoading()                              关闭loading效果

如何开启上拉加载的节流阀?

1.在data里定义isloading,为 true 表示正在进行数据请求,为 false 表示没有进行任何数据请求

2.在开启loading效果时,将值设为 true,在关闭loading效果时,将值设为 false

3.在上拉加载处理函数中进行判断,值为 true,阻止后续请求;值为 false,发起请求

10.小程序的生命周期

应用生命周期函数

App({

onLauch:小程序初始化完成时调用,全局只触发1次

onShow:小程序从后台进入前台显示时触发

onHide:小程序从前台进入后台时触发 })

页面生命周期函数

page({

onLoad:监听页面加载,一个页面只调用1次

onShow:监听页面显示

onReady:监听页面初次渲染完成,一个页面只调用1次

onHide:监听页面隐藏

onUnload:监听页面卸载,一个页面只调用1次

})

11.wxs

wxs的典型应用场景就是"过滤器",在WXML页面内部书写,直接调用.(和js相同,有内嵌式和外链式)

注意点:

1.wxs不支持类似于ES6以及以上的语法形式,定义变量只能使用 var

2.wxs遵循CommonJs规范

12.全局组件和局部组件

"usingComponents": {
    "my-text":"component/text/text"
  }

全局组件和局部组件的区别

1.组件的.json文件中需要声明"component":true属性

2.组件的.js文件中调用的是Component()函数

3.组件的事件处理函数需要定义在methods节点中

自定义组件样式

1.app.wxss中的全局样式对组件无效

2.只有calss选择器会有样式隔离效果,id/属性/标签选择器不受样式隔离的影响

注意:在组件和引用组件的页面中不要使用id/属性/标签选择器

13.插槽

// 在组件的.js文件中声明开启多个插槽
options:{
     multipleSlots:true
   },
// 给多个占位插槽添加name属性
<slot name="text1"></slot>
<slot name="text2"></slot>
// 往匹配的插槽里添加内容
<text slot="text1">插槽的引入1</text>
<text slot="text2">插槽的引入2</text>

14.组件通讯

1.属性绑定

用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据

2.事件绑定

用于组组件向父组件传递数据,可以传递任意数据

3.获取组件实例

父组件还可以通过this.selectComponent()获取子组件的实例对象
这样就可以直接访问子组件的任意数据和方法

15.分包

配置分包

  "subPackages": [
    {
      "root":"pakA",
      "pages": [
        "pages/jin/jin"
      ],
      "independent": true // 开启独立分包
    }
  ],