小程序开发

本文主要是介绍小程序开发，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

小程序样式导入

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

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

2. 行内样式

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

小程序支持的选择器类型

小程序插值表达式写法

1. 插件表达式

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

2. 小程序事件机制

绑定事件格式：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
   })

3. 冒泡与阻止冒泡写法差异

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

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

4. 小程序常用内置组件

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

内置组件(也称标签)：

   view,text,button,switch,swiper

小程序生命周期

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

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

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

小程序生命周期

1. 整体应用的生命周期

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

2. 页面的生命周期

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

小程序的路由

1. 路由管理
   在小程序中所有页面的路由全部由框架进行管理，框架以栈的形式维护了当前的所有页面。
2. 路由跳转方式
   在小程序中路由跳转方式有两种（组件跳转，api跳转）
   
3. navigateTo, redirectTo 只能打开非 tabBar 页面。
4. switchTab 只能打开 tabBar 页面。
5. reLaunch 可以打开任意页面。
6. 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
7. 调用页面路由带的参数可以在目标页面的onLoad中获取
8. 页面只有在出栈后才会被卸载也就是执行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',
    })

这篇关于小程序开发的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！