小程序相关知识点

目录

1. 小程序项目的基本组成结构：

2.小程序页面由哪几部分组成?

3. 小程序组件

 小程序宿主环境API:

 5. 小程序开发流程

6. 小程序版本

7. 小程序发布上线

8、获取小程序码

 9、查看小程序运营数据的两种方式

10. 数据绑定： Mustache语法(插值语法)应用场景

11、事件绑定

12、条件渲染

 wx:if与hidden的对比：

13、列表渲染

14、wxss与css区别

rpx的实现原理

15、全局样式与局部样式

16、数据请求

17、页面导航

1. 声明式导航

2. 编程式导航

3. 导航传参

18、页面事件

19、生命周期

20、WXS脚本

---

1. 小程序项目的基本组成结构：

app.js 全局入口文件

app.json 全局的配置文件

app.wxss 全局的样式

pages文件夹 官方定义的存储小程序页面的

2.小程序页面由哪几部分组成?

wxml 写本页面的结构

wxss 写本页面样式表

json 写本页面的配置文件

js 写本页面的业务逻辑

3. 小程序组件

(1)视图容器

view、scroll-view、swiper和swiper-item

<!--纵向滚动效果-->

<scroll-view class="container1" scroll-y>

<view>A</view>

<view>B</view>

<view>C</view>

</scroll-view>

<swiper class="swiper-container" indicator-dots indicator-active-color="red" indicator-color="white" autoplay interval="3000" circular>
  <!-- 第一个轮播图 -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!-- 第二个轮播图 -->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!-- 第三个轮播图 -->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

(2)基础内容

<!-- 常用的基础内容组件 text 和 rich-text的用法 -->

<view>

  手机号支持长按选中效果：

  <text selectable>18303709300</text>

  <rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

</view>

(3)表单组件

(4)导航组件

(5)媒体组件

(6)map地图组件

(7)canvas画布组件

(8)开放能力

(9)无障碍访问

其他组件用法:

button组件:

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">小尺寸按钮</button>
<button type="warn" plain>镂空按钮1</button>
<button size="mini" plain>镂空按钮2</button>

image组件:

 小程序宿主环境API:

 5. 小程序开发流程

6. 小程序版本

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

7. 小程序发布上线

上传代码 ----->  提交审核 -----> 发布上线

具体流程: 先上传代码, 上传为开发版本,然后点击提交审核, 提交到腾讯官方, 审核通过后, 接到通知; 再次登录小程序后台, 找到审核通过的版本, 点击发布, 发布为线上版本,供所有用户使用

8、获取小程序码

 9、查看小程序运营数据的两种方式

（1）在“小程序后台”查看

• 登录小程序管理后台
• 点击侧边栏的“统计”
• 点击相应的tab可以看到相关的数据

（2）使用“小程序数据助手”查看

• 打开微信
• 搜索“小程序数据助手”
• 查看已发布的小程序相关的数据

10. 数据绑定： Mustache语法(插值语法)应用场景

1. 绑定内容

<view>{{msg}}</view>

2. 绑定属性

<image src="{{imgSrc}}" mode="widthFix"></image>

3. 运算(三元运算、算术运算等)

<!-- 三元运算 -->

<view>{{random1 >= 5 ? '该数大于等于5' : '该数小于5'}}</view>

<!--  算数运算 -->

<view>计算之后: {{random2 * 100}}</view>

11、事件绑定

（1）点击(相当于click)  bindtap

注意：传参: 不能在函数名称后面直接1加()传参,因为bindtap的值默认就是函数名称,后面跟参数小程序也会认为是函数名称

<!-- 通过data-*="" 传参 (这里*表示参数名字, 引号里面写参数值,如果是数字,要加上{{}})-->

<!-- 通过e.target.dataset.参数名 来拿参数 -->

<view>{{count}}</view>

<button type="primary" bindtap="tapHandler">按钮</button>

<button type="primary" bindtap="addHandler">+1</button>

<button type="primary" bindtap="addHandler1" data-info="{{2}}">+2</button>

（2）<!-- 文本框 bindinput-->

<!-- 这里value可以动态绑定上值 -->

通过e.detail.value可以拿到 文本框最新的值

<input value="{{msg}}" bindinput="inputHandler" />

（3）bindchange： 状态改变时触发

12、条件渲染

wx:if、wx:elif、wx:else

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

 wx:if配合block标签使用，<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。多用于一次性控制多个组件的显示与隐藏。举例如下：

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

<!-- hidden控制隐藏与显示 -->
<view hidden="{{!flag}}">条件为true隐藏,条件为false显示</view>
<view wx:if="{{flag}}">flag为true显示, flag为fasle隐藏</view>

 wx:if与hidden的对比：

（1）运行方式不同：

•   wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
•  hidden以切换样式的方式（display:none/block;），控制元素的显示与隐藏     

（2）使用建议：

• 频繁切换时，建议使用hidden
• 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

13、列表渲染

通过wx:for可以根据指定的数组，循环渲染重复的组件结构

默认情况下，当前循环项的索引用index表示；当前循环项用item表示

可以通过wx:for-index修改默认当前循环项的索引，用wx:for-item修改默认当前循环项

加key提高性能，并且没有警告；有id拿id当key，没有id可以用index做key

<view wx:for="{{arr}}" wx:key="index">
  索引是: {{index}} , 当前项是: {{item}}  
</view>
<view wx:for="{{arr}}" wx:for-index="myindex" wx:for-item="myitem" wx:key="myindex">
  索引是: {{myindex}}, 当前项是: {{myitem}}
</view>
<view wx:for="{{username}}" wx:key="id">{{item.name}}</view>

14、wxss与css区别

wxss扩展的特性有：rpx尺寸单位、@import样式导入

rpx的实现原理

rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即:当前屏幕的总宽度为750rpx)。
     在较小的设备上，1rpx所代表的宽度较小
     在较大的设备上，1rpx所代表的宽度较大
小程序在不同设备上运行的时候，会自动把 rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

15、全局样式与局部样式

注意：

1. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
2. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
    

小程序根目录下的app.json文件是小程序的全局配置文件，常用的配置项如下：

（1）pages：记录当前小程序所有页面的存放路径

（2）window：全局设置小程序窗口的外观

（3）tarBar：设置小程序底部的tabBar效果

 

（4）style：是否开启新版的组件样式

页面配置：

 当全局配置与页面配置冲突时，根据就近原则，以页面配置为准。

16、数据请求

1. 出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

（1）只能请求HTTPS类型的接口

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

2. 配置request合法域名：

 3. 发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET数据请求，示例代码如下：

  wx.request({
      url:'https//www.escook.cn/api/get', //请求的接口地址,必须基于https协议
      method:'GET', //请求的方式
      data:{  //发送到服务器的数据
        name:'瑶瑶',
        age:22
      },
      success:(res)=>{  //请求成功之后的回调函数
        console.log(res)
      }
    })

 4. 发起POST请求

调用微信小程序提供的wx.request()方法，可以发起POST数据请求，示例代码如下：

  wx.request({
      url:'https//www.escook.cn/api/post', //请求的接口地址,必须基于https协议
      method:'POST', //请求的方式
      data:{  //发送到服务器的数据
        name:'瑶瑶',
        age:22
      },
      success:(res)=>{  //请求成功之后的回调函数
        console.log(res)
      }
   })

onLoad()事件里面的内容是刷新页面就会加载的

17、页面导航

1. 声明式导航

1. 导航到tabBar页面

使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

• url表示要跳转的页面的地址，必须以 / 开头
• open-type表示跳转的方式，必须为switchTab

<navigator url="/pages/info/info" open-type="switchTab">跳转到tabBar页面</navigator>

2. 导航到非tabBar页面

使用<navigator>组件跳转到普通的非tabBar页面时，需要指定url属性和open-type属性，其中：

• url表示要跳转的页面的地址，必须以 / 开头
• open-type表示跳转的方式，必须为switchTab

注意：为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略

• 如果要后退到上一页面或多级页面,需要open-type属性的值为

<navigator url="/pages/info/info" open-type="navigate">跳转到非tabBar页面</navigator>

<navigator url="/pages/info/info">跳转到非tabBar页面</navigator>

3. 后退导航

如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中：

• open-type的值必须是navigateBack，表示要进行后退导航
• delta的值必须是数字，表示要后退的层级

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

注意：为了简便，如果只是后退到上一页面，则可以省略delta属性，因为其默认值就是1 

2. 编程式导航

1. 导航到tabBar页面

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

<!-- 页面结构 -->
<button bindtap="gotomessage">跳转到tarBar页面</button>


//跳转到message页面（js页面中书写）
  gotomessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  },


<button bindtap="gotoindex">跳转到非tarBar页面</button>
<button bindtap="goback">后退</button>

2. 导航到非tabBar页面

调用wx.navigateTo(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

<!-- 页面结构 -->
<button bindtap="gotoindex">跳转到非tarBar页面</button>


//跳转到index页面（js页面中书写）
  gotomessage(){
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },



<button bindtap="goback">后退</button>

3. 后退导航

调用wx.navigateBack(Object object)方法，可以返回上一页或多级页面。其中Object参数对象的属性列表如下：

<!-- 页面结构 -->
<button bindtap="goback">后退</button>

//后退导航（js页面中书写）
  goback(){
    wx.navigateBack()
  },


//注：
goback(){
    wx.navigateBack({
        delta:1   //值为1时可以省略（如上写法）
    })
}

3. 导航传参

1. 声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

• 参数与路径之间使用?分隔
• 参数键与参数值用 = 相连
• 不同参数用&分隔

<navigator url="/pages/logs/logs?name=yaoyao&age=20">跳转到logs页面</navigator>

2. 编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数

<!-- 页面结构 -->
<button bindtap="getcanshu">编程式跳转到logs页面</button>

// 编程式导航传参
  getcanshu(){
    wx.navigateTo({
      url: '/pages/logs/logs?name=yao&age=20',
    })
  },

3. 在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，示例代码如下:

这里的options只能这一个页面可以访问, 我们可以先在data里面声明一个初始值,然后把options的值赋给它即可,就可以让其他页面也访问到options里面的值

data: {
    query:{}  //导航传递过来的参数对象
},


//声明周期函数----监听页面加载
  onLoad:function(options) {
    //options就是导航传递过来的参数对象
    console.log(options)  //这里的options只能这一个页面可以访问, 我们可以先在data里面声明一个初始值,然后把options的值赋给它即可,就可以让其他页面也访问到options里面的值
    this.setData({
      query:options
    })
  }
})

18、页面事件

19、生命周期

20、WXS脚本