原生微信小程序

_小小怪_
361 阅读8分钟

传统web和微信小程序结构上的区别

结构传统web微信小程序
结构HTMLWXML
样式CSSWXSS
逻辑javascriptjavascript
配置无JSON

全局配置

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等配置

属性描述
pages页面路径列表
window全局的默认窗口表现
tabBar底部 tab 栏的表现

链接：developers.weixin.qq.com/miniprogram…

页面配置

页面配置的文件是page.json。只能设置全局配置中关于window字段的功能。如设置页面标题，导航栏颜色等。

  • 不用写window字段
  • 优先级比全局配置高

数据绑定---插值表达式

  1. 数据绑定也叫插值表达式，是一种将变量渲染到页面中的技术
  2. 插值：把表达式插入到页面中的写法叫做插值， 符号是 {{}}
<view>{{a}}</view>
<view>{{flag?'小屁孩':'坏孩子'}}</view>

条件渲染

两种方式：

  1. wx:if
  2. hidden
<!-- wx:if  当判断条件为 true时，则显示元素，为false时，则移除元素 -->
<view wx:if="{{ifShow}}">{{ifShow?'if显示':'if移除'}}</view>

<!-- hidden：当判断条件为 true时，则隐藏元素，为false时，则显示元素 -->
<view hidden="{{ishidden}}">{{ishidden?'hidden隐藏':'hidden显示'}}</view>

注意：当使用条件渲染时，双引号和大括号 中间不能留有空白， 以下代码会导致 wx:if 的值为 true

image.png

wx:if 和 hidden 之间的区别：

相同点：

wx:if 和 hidden 都能控制标签的显示与隐藏

不同点：
  • wx:if 实现标签隐藏时通过移除标签来实现的
  • hidden 实现标签隐藏时通过添加样式来是现实的 建议：如果一个标签频繁切换显示，建议使用 hidden 实际开发中，很多人更多使用 wx:if

列表渲染

  1. wx:for-item 可以指定数组当前元素的变量名
  2. wx:for-index 可以指定数组当前下标的变量名
  3. wx:key 可以在渲染每一项时，指定一个唯一的标识，方便小程序查找和提高重新渲染的效率，防止数组种的元素频繁修改

wx:key 针对不同的数组类型有不同的写法

  • 数组对象：wx:key = "字符串" 表示对象唯一属性
  • 普通数组：wx:key = "*this"
<!-- 遍历数组 -->
<view>遍历数组</view>

<!-- <view wx:for="{{list}}">{{index}}{{item}}</view> -->

<!-- 改变固定的索引变量和属性值 -->
<!-- <view wx:for="{{list}}" wx:for-index="i" wx:for-item="v" >{{i}}{{v}}</view> -->

<!--
     wx:key：针对不同的数组类型有不同的写法
        数组对象：wx:key="字符串"   字符串表示对象唯一属性
        普通数组：wx:key="*this"
 -->
 <view>````普通数组`````</view>
   
 <view wx:for="{{list}}" wx:key="*this">{{item}}</view>

 <view>````数组对象`````</view>
 <view wx:for="{{list1}}" wx:key="id">{{item.name}}</view>

事件绑定

小程序中绑定事件，通过bind和catch关键字来实现。如 bindtap 和 catchtap

  1. bind：事件冒泡
  2. catch：事件捕获
<!-- bind：事件冒泡 -->
<view bindtap = "handleTap">
    父标签（事件冒泡）
    <view bindtap = "handleTap">
        子标签
    </view>
      
</view>

  <!-- catch：事件捕获 -->
<view catchtap = "handleTap">
    父标签（事件捕获）
    <view catchtap = "handleTap">
        子标签
    </view>
      
</view>

Page({
    // 事件冒泡和捕获
    handleTap(){
        console.log('text',);
    }
})

事件传参

通过自定义属性的方式传参

<!-- 事件传参 -->
<!-- 如果没有加花括号，则传入的参数为字符串， -->
<view bindtap = "handleTap1" data-num="100">输出100</view>
<view bindtap = "handleTap1" data-num="{{200}}">输出200</view>

data 的获取和设置

  1. 获取 data 中的值
    • this.data.属性名
  2. 设置 data 中的值
    • this.setData({属性名:属性值})
<view bindtap = "handleTap">{{num}}点击自增</view>
  
<!-- 给数组添加元素 -->
<view bindtap = "handleAdd" >+</view>
  
<view wx:for="{{list}}" wx:key="*this">{{item}}</view>
  
<!-- 设置对象属性 -->
<view bindtap = "handleObj">{{person.name}}-{{person.age}}</view>

Page({
    data: {
        num: 100,
        list:['🐕'],
        person:{
            name:'小狗',
            age:1
        }
    },
    handleTap(){
        // 获取 data中的值
        // ⭐this.data.属性名
        console.log(this.data.num);
        let num = this.data.num
        // 设置 data中的值
        // ⭐this.setData({属性名:属性值})
        this.setData({num:++num})
    },
    handleAdd(){
        // 1、获取到数组（不建议直接修改 数组和对象的值）
        // 浅拷贝
        const list = [...this.data.list]
        list.push('🐒')
        this.setData({list})
    },
    handleObj(){
        // 高效
        this.setData({'person.age':10})

        // 复杂、低效、麻烦
        // const person = {...this.data.person}
        // person.age=20
        // this.setData({person})
    }
})

微信小程序的样式

  1. 后缀名：wxcss
  2. 全局样式（app.wxss）和 页面样式（页面.wxss）
    • 页面样式的优先级比全局样式高
  3. 不支持通配符 *
    • 通过挨个书写标签选择器来实现样式格式化
  4. 新增了一个单位 rpx
    • rpx（responsive pixel）: 规定不管屏幕为多少px，按照rpx来换算 为750rpx
    • 屏幕的宽度 = 750rpx 注意：微信小程序不能使用 rem单位，因为rem是相对于web页面的根元素html标签的。

内置组件

image

  1. 默认大小为 320 * 240
  2. 支持懒加载
  3. 通过mode属性控制渲染效果
属性名类型默认值说明
srcString图片资源地址
modeString'scaleToFill图片裁剪、缩放的模式

mode 裁剪模式，决定图片内容如何显示

模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，直到图片某一边碰到边界
缩放aspectFill保持纵横比缩放图片，直到图片完全铺满边界
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变
<image mode="widthFix" src="/images/1.jpg"></image>

swiper

swiper理解为小程序内置的轮播图标签，拥有了它可以让我们特别方便实现轮播功能

  • 默认宽度 和 高度 为 100% * 150px
  <!-- 轮播图 -->
<swiper indicator-dots circular autoplay>
    <swiper-item><image src="/images/1.jpg"/></swiper-item>
    <swiper-item><image src="/images/3.jpg"/></swiper-item>
    <swiper-item><image src="/images/2.jpg"/></swiper-item>
</swiper>

swiper 和 image 相结合的难点

  • swiper 默认高度是 150px
  • image 默认高度是 240px 那么当两者在一起显示的时候，往往需要我们自行去微调两者的高度，已达到看起来比较和谐的效果

navigator

navigator：跳转的页面是当前小程序内时，根据页面的类型不同，要设置对应的open-type才有对应效果

值说明
navigate保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面
switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch关闭所有页面，打开到应用内的某个页面
navigateBack关闭当前页面，返回上一页面或多级页面

当想要跳转到其他的小程序页面时

  1. 设置 target =“miniProgram”
  2. 填写 属性 short-link = “链接”（版本要求 2.18.1）或者设置 app-id （推荐）
<!-- 跳转页面 -->
<!-- open-type="navigate" -->
<navigator  url="/pages/todo/todo">todo</navigator>
<navigator open-type="redirect"  url="/pages/word/word">word</navigator>
<navigator open-type="switchTab"  url="/pages/index/index">index</navigator>
  
<!-- 跳转小程序 -->
<navigator target="miniProgram" short-link="#小程序://不凡潮空间/不凡潮空间/xKdMOirAtr2sdRe">不凡潮空间</navigator>
<navigator target="miniProgram"  app-id="wx8a5d6f9fad07544e">微信读书</navigator>

button

值说明
contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share触发用户转发
getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
<button open-type="contact">联系客服</button>
<button open-type="share">转发</button>
<button open-type="getPhoneNumber" bindgetphonenumber = "handleGetPhoneNumber">获取手机号码</button>
<button open-type="feedback">意见反馈</button>

rich-text

小程序中内置的富文本标签，通过传入 nodes 属性来使用

image.png

自定义组件

定义组件理解为允许我们创造自己想要的某些效果的标签

  1. image是小程序指定的图片标签
  2. border-image 可以是我们自己创造的标签 3、自定义组件中的函数必须写在methods方法中 自定义组件还具有简化页面结构、封装复用代码的功能

组件的注册在页面中的 页面.json文件进行注册

image.png

组件在wxml中直接使用

image.png

父传子

父组件传递数据

<view class="borderImage">
    <border-image bindsrcChange = "handleSrcChange" src="/images/1.jpg"></border-image>
    <border-image bindsrcChange = "handleSrcChange" src="/images/2.jpg"></border-image>
    <border-image bindsrcChange = "handleSrcChange" src="/images/3.jpg"></border-image>
</view>

子组件接收数据

properties: {
        src:{
            type:String,
            value:'',
        },
    },

子组件使用数据

<image mode="widthFix" class="subImages" src="{{src}}"></image>

子传父

子组件绑定事件

<image mode="widthFix" bindtap = "handleSubImage" class="subImages" src="{{src}}"></image>

事件触发时，获取图片的 src数据，并触发父组件的自定义事件

 methods: {
        handleSubImage(e){
            this.triggerEvent("srcChange",this.properties.src)
        }
    }

父组件在使用子组件时要监听自定义事件

<border-image bindsrcChange = "handleSrcChange" src="/images/1.jpg"></border-image>

父组件获取子组件传递过来的数据

  handleSrcChange(e){
        this.setData({
            src:e.detail
        })
    }

image.png

微信小程序生命周期

分类

  1. 应用生命周期
  2. 页面生命周期
  3. 组件生命周期

应用生命周期

属性说明
onLaunch当小程序初始化完成时，会触发 onLaunch（全局只触发一次）;作用：初始化，发送网络请求 获取全局都需要用到的数据（云开发的初始化！！！ ）
onShow当小程序启动，或从后台进入前台显示，会触发 onShow（重新开启播放 定时器）
onHide当小程序从前台进入后台，会触发 onHide；屏幕看不见当前小程序 切换到其他的app应用（取消定时 异步任务 暂停 播放）
onError当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息（发送网络请求 把错误信息 收集起来 ）
onThemeChange监听系统主题变化

页面生命周期

属性说明
onLoad生命周期回调—监听页面加载；作用：发送异步网络请求 数据 页面渲染
onReady生命周期函数--监听页面初次渲染完成；作用：获取到页面元素 样式 宽度 高度
onShow生命周期函数--监听页面显示；作用：重新开启定时器 播放器 发送请求获取数据的功能！！
onHide生命周期函数--监听页面隐藏 导航标签 A页面 跳转到B页面 A页面就被隐藏了 ；使用导航 跳转页面的时候 如果 保留当前页面 隐藏 就会触发；作用：停止定时器 暂停 播放器
onUnload生命周期函数--监听页面卸载；使用导航 跳转页面的时候 如果 关闭 卸载 就会触发；作用：停止定时器 暂停 播放器
onPullDownRefresh页面相关事件处理函数--监听用户下拉动作
onReachBottom页面上拉触底事件的处理函数
onShareAppMessage用户点击右上角分享
onShareTimeline用户点击右上角转发到朋友圈

组件生命周期

image.png

avatar
文章
阅读
粉丝