小程序开发

互联网 2021/4/7 22:08:27 次

标签： 程序路由跳转页面 TabBar 冒泡程序开发

小程序布局与普通Web开发差异小程序的设计稿通常是按照iPhone6 宽度一般韦750 的尺寸设计的小程序代码是真的h5代码吗？小程序当然不是H5，它也不用html写，使用WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。…

小程序布局与普通Web开发差异

小程序的设计稿通常是按照iPhone6 宽度一般韦750 的尺寸设计的
小程序代码是真的h5代码吗？小程序当然不是H5，它也不用html写，使用WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

小程序样式导入

使用@import语句可以导入外联样式表，只支持相对路径

例如：@import "/public/css/style.wxss";

行内样式

 <view style="color: {{index===1? 'red' : ''}}"</view>

小程序支持的选择器类型

在这里插入图片描述

小程序插值表达式写法

插件表达式

<view class="{{index == 0 ? 'getFocus' : 'lostFocus'}}">常用</view>

小程序事件机制

绑定事件格式：bind+事件名  例如：<button bindtap="要触发的方法">
传参问题：小程序主要通过自定义属性来传参

wxml:
	  <button bindtap="del" data-idx="{{index}}">X</button>

js:
  //用e.currentTarget.dataset来接收视图传递过来的自定义属性值
  del(e) {
    let {idx}=e.currentTarget.dataset;
    console.log(idx)
  }

视图同步的问题：可以通过this.setData()来同步视图
  
   this.setData({
      list:this.data.list
   })

冒泡与阻止冒泡写法差异

复习一下事件流：事件冒泡和事件捕获
   事件冒泡：由具体的事件产生的元素向上事件传递，直到最外层的元素 
   	阻止冒泡：e.stopPropaGation()
   事件捕获：传递方式与事件冒泡相反（即由最外层到最内层具体的元素的）
   
微信小程序如何事件事件冒泡：

注意：
	1.默认用bind+事件名绑定的都是会冒泡的
	2.通常用catch+事件名绑定的会阻止冒泡的

小程序常用内置组件

组件：内置组件和自定义组件

内置组件(也称标签)：

   view,text,button,switch,swiper

小程序生命周期

在这里插入图片描述

onLaunch() {
  console.log('onLaunch监听小程序初始化');
}

onShow() {
  console.log('onShow监听小程序显示');
}

onHide() {
  console.log('onLaunch监听小程序隐藏');
}

小程序生命周期

整体应用的生命周期

       App({
        //程序启动时的只加载一次
       	onLaunch() {},
       	//切换到前台运行
       	onShow() {},
         //切换后台运行
       	onHide() {},
       	//监听和收集代码错误信息
       	onError() {},
       	....
       })

页面的生命周期

Page({
  //页面加载时只执行一次
	onLoad() {},
	//监听页面初次渲染完成,此果就可以和页面进行各种交互，只加载一次
	onReady() {},
	//只要页面显示时就会触发
	onShow() {},
	//只要页面离开地就会触发
	onHide() {},
	//到达页面底端触发
	onReachBottom() {},
	//监听下拉刷新，注意要开启enablePullDownRefresh为true
	onPullDownRefresh() {},
	//监听页面滚动
	onPageScroll() {}
})

小程序的路由

路由管理
在小程序中所有页面的路由全部由框架进行管理，框架以栈的形式维护了当前的所有页面。
路由跳转方式
在小程序中路由跳转方式有两种（组件跳转，api跳转）
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取
页面只有在出栈后才会被卸载也就是执行onUnload, tab页面只有在程序卸载的时候才会卸载
标签模式的路由

格式：

标签路由类似于vue中的

open-type值的类型有：

1.navigate 默认值，即只能打开非tabBar页面，有回退按钮
  相当于this.$router.push('路径')
2.switchTab 只能跳转到tabBar页面
3.reLaunch 即能跳转到tabBar页面，也能跳转到非tabBar页面
4.redirect 只能跳转到非tabBar页面，但没有回退按钮  相当于vue中this.$router.replace('路径 ')

JS模式的路由

JS模式路由类似于Vue中的编程式导航 例如：this.$router.push()

    wx.navigateTo({
       url: '/pages/jd_market/jd_market',
     })
    wx.switchTab({
      url: `/pages/shopping/shopping`,
    })

    wx.reLaunch({
      url: 'url',
    })

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[小程序开发]http://www.zyiz.net/tech/detail-153526.html

您可能感兴趣的文章:

上一篇：【微信小程序】引入阿里巴巴图标库iconfont

下一篇：【uni-app/微信小程序】预览图片（单张、多张）uni.previewImage()

共有条评论网友评论

关注微信小程序

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦！

技术文章导航更多>

小程序开发

小程序布局与普通Web开发差异

小程序样式导入

小程序支持的选择器类型

小程序插值表达式写法

小程序生命周期

小程序的路由

关于找一找教程网

您可能感兴趣的文章:

相关文章

共有条评论网友评论

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯

小程序开发

小程序布局与普通Web开发差异

小程序样式导入

小程序支持的选择器类型

小程序插值表达式写法

小程序生命周期

小程序的路由

关于找一找教程网

您可能感兴趣的文章:

共有 条评论 网友评论

共有条评论网友评论