微信小程序：微信web开发阶段性学习总结

Posted 2022-11-15 qjqj0-0

小程序运行机制

前台/后台状态

小程序启动后，界面被展示给用户，此时小程序处于前台状态。

当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间。

当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。

小程序启动

这样，小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。

热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

——————————————————————————————————

自定义组件

首先需要在 json 文件中进行自定义组件声明

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

在使用该自定义组件的页面的json文件中使用

  "usingComponents":

    "component-tag-name": "../custom/custom"

 

定义组件名并且标注组件地址。

**继承样式，如 font 、 color ，会从组件外继承到组件内。

**除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效

页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。

Component(

  properties:

    paramA: Number,

    paramB: String,

  ,

  methods:

    onLoad: function()

      this.data.paramA // 页面参数 paramA 的值

      this.data.paramB // 页面参数 paramB 的值

   

 

)

——————————————————————————

使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。

例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。

代码示例：

// page-common-behavior.js

module.exports = Behavior(

  attached: function()

    // 页面创建时执行

    console.info(‘Page loaded!‘)

  ,

  detached: function()

    // 页面销毁时执行

    console.info(‘Page unloaded!‘)

 

)

——————————————————————————————————

监听事件

wxml中

<component-tag-name bind:myevent="onMyEvent" />

js中

Page(

  onMyEvent: function(e)

    e.detail // 自定义组件触发事件时提供的detail对象

 

)

———————————————————————————————————

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。

自定义组件中

wxml

<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

js

Component(

  properties: ,

  methods:

    onTap: function()

      var myEventDetail = // detail对象，提供给事件监听函数

      var myEventOption = // 触发事件的选项

      this.triggerEvent(‘myevent‘, myEventDetail, myEventOption)

   

 

)

——————————————————————————————————

组件生命周期

在组件的js的component中

  lifetimes:

    attached: function()

      // 在组件实例进入页面节点树时执行

    ,

    detached: function()

      // 在组件实例被从页面节点树移除时执行

    ,

  ,

——————————————————————————————————————

弹性盒子布局

wxss

.container

  

   height: 100vh;

 

   display: flex;

   flex-direction: column;

   justify-content: space-around;

   align-items:center;

wxml

<view class=‘container‘>

<image src=‘/images/33.png‘></image>

<text>这是33</text>

<text>33在拿着手机扫二维码</text>

<text>www.bilibili.com</text>

</view>

本页面的样式只能用于本页面，全局样式可以在app.wxss中定义

——————————————————————————————————

页面跳转

navigator组件

open-type属性，hover-class属性，及使用时注意之处

<text>元素只能包含纯文本，里面有多余的东西会被忽略掉

open-type属性

open-type="redirect"没有返回  open-type="navigate"有返回

hover-class属性

hover-class=‘index-class‘

在对应wxss中写index-class类，可以定义这个链接被点击时候的样式

之前的颜色要在这个类上面定义（物理）

wxml默认组件以属性（内置）定义的都是在最后的

——————————————————————————————————————————

之后又学习了底端栏tabBar，在app.json中，有list，color，selectedcolor，list中至少包含两个部分，每一个部分中又包含text，pagePath，iconPath以及selectedIconPath四个部分。

——————————————————————————————————————————

<h2>第三讲</h2>

数据绑定：js的page中data中的数据，可以通过数据名的形式进行调用。

js中：

data:   count:123

wxml中：

<text>count</text>

———————————————————————————————

wx:if的使用：

js中：

data: thisindex: istrue:true ,

wxml中：

<text wx:if="thisindex.istrue">juyue</text>

—————————————————————————————

wx:for的使用：

js data中：

thislist2 : [ content:"zanmeitaiyang" ,

content:"xianyoulaojuhouyoutian,taiyangqishirishenxian" ,

content:"rongyaoshuyutianshengzhankuang" ],

wxml中：

<view wx:for="thislist2">

  <text>第index次循环</text>

  <text>content:item.content</text>

</view>

index是微信小程序列表渲染的内置元素，从零开始，循环一次加一。同样的，也是要用来使用js中的数据。

_______________________________________

swiper（幻灯片）元素的使用：

在设置幻灯片宽高时，一般要在swiper元素上统一设置。

优化轮播图，看list.wxml中，为显示面板指示

<swiper indicator-dots="true">,

_______________________________________

生命周期函数：

onLoad:function(options)   页面初始化时调用

onShow:function()   每次的页面显示都要调用

onReady:function()   初始化完成，整个视图准备好了可以开始交互的时候被调用

onHide:function()   每次的页面隐藏都要调用

onUnload:function()   每次页面被关闭或被卸载都要调用

——————————————————————————————————————————————————

this.setData()函数详解：

在小程序中对内部数据更新不能采用赋值的方式，必须调用小程序提供的this.setData这个方法

可以在逻辑层更新变量的同时更新视图层。

且可以根据需要新增变量（先到data中找变量，如果data中没有就自动创建一个新的变量），而且也不用

this.data.balabala了，可以读到data内部。详情见list页面的js部分

——————————————————————————————————————————————————

事件机制：响应用户交互

bindtap和catchtap的区别：

bindtap冒泡向上传递给父节点，在触发bindtap时如果父节点也有tap绑定的事件，则父节点会一起触发事件，catchtap不冒泡向上传递，只触发本节点的tap事件。

tap事件绑定的事件在js中写

_______________________________________

页面导航：

wx.navigateTo(Object object) ：保留原有页面，可以返回原有页面

wx.redirectTo(Object object)：不保留原有页面，是重定向

________________________________________________

组件的自定义属性：

在组件中 data-xxx-yyy，那么就可以把js中我们自己定义的数据传递给这个属性，我这里是这样的

data-test-id="item.id" ，这个属性就可以被封装在同节点的时间处理函数的event参数中传给js，后台可以通过

event.currentTarget.dataset.testId来获取上面这个例子的item.id.

作用就是可以将data中的数据动态的传递给事件处理函数，视图层只是相当于一个中介。

————————————————————————————————————————————————————————————————————

将原页面的数据传给navigateTo的页面：

在用url传参的时候，前面是路径，我在list.js中写的是绝对路径，？后面是对应的参数，参数与参数用&连接。

在导航到的页面，通过该页面的onLoad函数来获取url中的内容。

_______________________________________

wx.request函数：

success回调函数的res对象，

data属性中抽取了responsebody中的文本返回一个字符串，

header中的Content-Type类型是text/html，这时收到的responsebody中的文本直接以字符串的形式保存在data中，

若Content-Type返回的是一个Application JSON的形式，则responsebody中的文本以json格式返回，小程序会将这个文本处理成javascript的格式并保存到data中，如果是json对象，就处理成JavaScript对象，如果是json对象数组，就处理成JavaScript对象数组

——————————————————————————————————————————————————

调用外部API

，！！！外部api返回的数据会保存在success的res参数中，我们要做的就是将收到的数据保存到页面内部数据中！！！

请求的url是一个域名+uri的形式，，

把this用 var that = this 保留this对象，

因为在success回调函数中的this指针是指向这个success函数所指向的参数对象，

___________________________________________________________

在页面初始化的最后，也就是调用request方法之后，调用wx.showNavigationBarLoading() 这个api来显示loading动画。 在收到response，也就是收到外部数据之后，也就是在success回调函数里面，最后写wx.hideNavigationBarLoading()这个。

想动态设置标题，用下面这个，也是在success回调函数中 wx.setNavigationBarTitle( title: ‘‘, )

___________________________________________________________

！！！在使用form表单传值的时候，一定要在input等组件中定义name属性作为key！！！

formSubmit: function (e)

   var formdata = e.detail.value.input;

   var that = this;

   wx: wx.request(

      url: ‘http://baidu.com/a/b.jsp‘,

      method: "GET",

      data: formdata ,

       header: ,

       success: function (res)

         console.log("notice发送成功")

         console.log(formdata)

         that.setData(

           responsedata: res.data

          )

       ,

     )

,

上面是我在notice中的例子。

——————————————————————————————————————————

小程序学习告一段落。