微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识

微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识

---

一、基本目录介绍

1.微信小程序

app.js ------ 小程序逻辑
app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息)
app.wxss ---- 小程序公共样式表
components — 组件目录
pages ------- 业务页面文件存放的目录
resources ---- 存放应用引用静态资源（如图片、视频等）的目录
utils ---------- 接口文件

2.uni-app开发小程序

pages.json ------- 公共配置(配页面路由、导航条、选项卡等页面类信息)
App.vue ---------- 应用配置，用来配置App全局样式以及监听
main.js ------------ Vue初始化入口文件
components — 组件目录
pages ------- 业务页面文件存放的目录
static -------- 存放应用引用静态资源（如图片、视频等）的目录
utils ---------- 接口文件

3.taro开发小程序

dist --------- 编译结果目录
config ------ 配置目录
src ------ 源码目录(包含：
–|--------- pages ----- 页面文件目录
–|--------- app.scss — 项目总通用样式
–|--------- app.jsx ------ 项目入口文件
–|--------- resources – 存放应用引用静态资源（如图片、视频等）的目录
–|--------- utils ---------- 接口文件
–|--------- components — 组件目录

二、全局配置

1. 微信小程序

在app.json文件内配置：
pages： 页面文件路径
window： 设置小程序的状态栏、导航条、标题、窗口背景色
tabBar： 客户端窗口的底部或顶部有 tab 栏可以切换页面
networkTimeout： 各类网络请求的超时时间，单位均为毫秒
debug： 者工具中开启 debug 模式

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
  	"navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

【注意】：页面的导航栏标题文字内容修改，需要到页面json文件内修改。

详细流程介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

2. uni-app开发小程序

pages.json文件内配置：
pages： 页面文件路径
globalStyle： 设置小程序的状态栏、导航条、标题、窗口背景色
tabBar： 客户端窗口的底部或顶部有 tab 栏可以切换页面

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
    }],
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
            "name": "test", //模式名称
            "path": "pages/component/view/index" //启动页面，必选
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        },
    "pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "list": [{
            "pagePath": "pages/component/index",
            "iconPath": "static/image/icon_component.png",
            "selectedIconPath": "static/image/icon_component_HL.png",
            "text": "组件"
        }, {
            "pagePath": "pages/API/index",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }],
        "midButton": {
            "width": "80px",
            "height": "50px",
            "text": "文字",
            "iconPath": "static/image/midButton_iconPath.png",
            "iconWidth": "24px",
            "backgroundImage": "static/image/midButton_backgroundImage.png"
        }
    },
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
        "uni-(.*)": "@/components/uni-$1.vue"
    }
  }
}

在uni-app里页面文件路径不是在pages里直接写，是在pages下面path属性里面写，页面导航栏标题在pages下面style属性里修改

详细流程介绍：https://uniapp.dcloud.io/collocation/pages?id=pages

3. taro开发小程序

src目录下app.jsx文件内配置：

pages： 页面文件路径
window： 设置小程序的状态栏、导航条、标题、窗口背景色
tabBar： 客户端窗口的底部或顶部有 tab 栏可以切换页面

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'
import './app.scss'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

class App extends Component {

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  config = {
    pages: [
      'pages/index/index',
      'pages/logs/index'
    ],
    window: {
  	  navigationBarTitleText: 'Demo'
    },
    tabBar: {
      selectedColor: '#e1251b',
      list: [
        {
            pagePath: 'pages/component/index',
            iconPath: 'static/image/icon_component.png',
            selectedIconPath: 'static/image/icon_component_HL.png',
            text: '组件"
        }, 
        {
            pagePath: 'pages/API/index',
            iconPath: 'static/image/icon_API.png',
            selectedIconPath: 'static/image/icon_API_HL.png',
            text: '接口'
        }]
    }
  }

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Index />
    )
  }
}
Taro.render(<App />, document.getElementById('app'))

taro开发小程序基本语法跟react相同，引入组件首字母需要大写，不然会被当做html标签，key值一律不加引号，value只加单引号，图片使用相对路径。
全局配置API跟微信小程序一样
详细流程介绍： https://taro-docs.jd.com/taro/docs/tutorial.html

三、生命周期

1. 微信小程序

• 生命周期（全局）
  app.js文件内

App({
  onLaunch (options) { 
    console.log('小程序初始化')
  },
  onShow(options) {
    console.log('监听小程序启动或切前台')
  },
  onHide() {
    console.log('监听小程序切后台')
  },
  onError(msg) {
    console.log('错误监听函数')
  },
  onPageNotFound(res) {
    console.log('小程序要打开的页面不存在时触发');
    wx.redirectTo({ // 重定向
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  },
  globalData: { //全局变量
    userInfo: null,
  },
  f1() {
  	console.log('自定义函数')
  }
})

onLaunch一般用于请求数据，onShow是当前页面显示时执行（可以多次执行），onHide当前页面隐藏时执行（可以多次执行），onError出现错误时执行

• 页面生命周期：
  页面js文件内

Page({

 /**
  * 页面的初始数据
  */
 data: {
 },
 
 /*页面生命周期*/
  onReady: function () {
    console.log('监听页面初次渲染完成')
  },
  onShow: function () {
    console.log('监听页面显示')
  },
  onHide: function () {
    console.log('监听页面隐藏')
  },
  onUnload: function () {
    console.log('监听页面卸载')
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

onLaunch一般用于请求数据，onShow是当前页面显示时执行（可以多次执行），onHide当前页面隐藏时执行（可以多次执行），onUnload完全退出当前页面时执行

• 组件生命周期：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  },
  
  /*组件生命周期*/ 
  lifetimes: {
    created() {
      console.log("在组件实例刚刚被创建时执行")
    },
    attached() { 
      console.log("在组件实例进入页面节点树时执行")
    },
    ready() {
      console.log("在组件在视图层布局完成后执行")
    },
    moved() {
      console.log("在组件实例被移动到节点树另一个位置时执行")
    },
    detached() {
      console.log("在组件实例被从页面节点树移除时执行")
    },
    error() {
      console.log("每当组件方法抛出错误时执行")
    },
    
    /*组件所在页面的生命周期 */
    pageLifetimes: {
      show: function () {
        console.log("页面被展示")
      },
      hide: function () {
        console.log("页面被隐藏")
      },
      resize: function (size) {
        console.log("页面尺寸变化")
      }
    }
  }
})

properties父子传递时候，子组件接收数据；methods子组件自定义函数

2. uni-app

• 生命周期（全局）
  App.vue文件内

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

• 页面生命周期

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0

详细流程介绍： https://uniapp.dcloud.io/collocation/frame/lifecycle

• 组件生命周期

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

详细流程介绍： https://uniapp.dcloud.io/collocation/frame/lifecycle

3. taro开发

• 生命周期（全局）
  App.jsx

// app.jsx
// onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch
componentWillMount() {}

// onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch，在 componentWillMount 后执行
componentDidMount () {}

// 在微信小程序中这一生命周期方法对应 onShow
componentDidShow () {}

// 在微信小程序中这一生命周期方法对应 onHide
componentDidHide () {}

// 错误监听函数，在微信小程序中这一生命周期方法对应 onError
componentDidCatchError () {}

// 页面不存在监听函数，在微信小程序中这一生命周期方法对应 onPageNotFound
componentDidNotFound () {}

• 页面生命周期

//创建对象初始化state.this的指向
constructor () { }

//页面即将加载----react一致
componentWillMount () { }

//页面加载完毕----react一致
componentDidMount () { }

//在微信小程序中这一生命周期方法对应 onShow
componentDidShow () { }

//在微信小程序中这一生命周期方法对应 onHide
componentDidHide () { }

//页面是否需要更新----react 一致
shouldComponentUpdate () { }

//页面即将更新----react一致
componentWillUpdate () { }

//页面更新完毕----react一致 
componentDidUpdate () { }

//页面卸载时触发，在微信小程序中这一生命周期方法对应 onUnload
componentWillUnmount () { }

//页面相关事件处理函数–监听用户下拉动作
onPullDownRefresh () { }

//页面上拉触底事件的处理函数
onReachBottom () { } 

//用户点击右上角转发
onShareAppMessage () { }

//页面滚动触发事件的处理函数
onPageScroll () { } 

//当前是 tab 页时，点击 tab 时触发
onTabItemTap () { }

//预加载，只在微信小程序中可用
componentWillPreload () { }

• 组件生命周期

// 创建对象初始化state
constructor(): 

// 在渲染前调用,在客户端也在服务端
componentWillMount() { }

// 在第一次渲染后调用
componentDidMount() { }

// 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
componentWillReceiveProps(newProps) { }

// 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
shouldComponentUpdate(newProps, newState) { }

// 组件将要被更新,在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentWillUpdate(nextProps, nextState) { }

// 组件更新完毕,在组件完成更新后立即调用。在初始化时不会被调用。
componentDidUpdate(prevProps, prevState) { }

// 组件将要被卸载,在组件从 DOM 中移除之前立刻被调用。
componentWillUnmount() { }

render () { }

详细流程介绍： https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

四、声明式导航跳转

跳转

// 微信小程序
<navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" >
	<view class="" >
		声明式导航跳转
	view>
navigator>

//uni-app
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
	<button type="default">跳转到新页面button>
navigator>

//taro
<View className="prolist">
	
})
// uni-app
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// taro
Taro.navigateTo({
	url: '/pages/detail/index?proid=' + item.proid
})

获取数据：

// 微信小程序
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})
// uni-app
 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
    console.log(option.id); //打印出上个页面传递的参数。
    console.log(option.name); //打印出上个页面传递的参数。
}

// taro
const { proid } = this.$router.params

微信小程序详细流程介绍： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
uni-app详细流程介绍： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
uni-app详细流程介绍： https://taro-docs.jd.com/taro/docs/apis/interface/navigation/navigateTo.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81l

六、父子传递参数

1. 微信小程序

2. uni-app

– props

// 父：
<template>
    <view>
        <child :showModal="showModal">child>
    view>
template>
<script>
    import child from "../../components/child.vue"
    export default {
        components: {
            child
        },
        data() {
            return {
                showModal: " parent say"
            };
        },
      
    }
script>


// 子：
<template>
     <view class="child"> hi {{showModal}}view> 
template>
<script>
 export default {
      props: {
          showModal: {
              type: String,
              default: 'hello'
          }
      },
script>

$emit（父子传递函数）

// 父：
<template>
	<view>
		<v-sub @returnDate=returnDate :backGround=backGround>v-sub>
	view>
template>
<script>
	import vSub from "../../../components/v-sub.vue"
	export default {
		components:{
			vSub
		},
		data() {
			return {
				backGround:"#000"
			}
		},
		methods: {
			returnDate(e){
				console.log("接收到的值==>>"+e)
			}
		}
	}
script>

// 子：
<template>
	<view class="content">
		<button @tap="passValue">点击传值button>
	view>
template>
 
<script>
	export default {
		props:{ },
		methods:{
			passValue(){
				this.$emit("returnDate","yoyoyo")
			}
		}
	}
script>

直接定义新的数据名

// 父：
<view>
	<v-sub :backGround=backGround>v-sub>
view>

// 子：
props:{
	backGround:{
		type:String,
		default:"#fff"
	}
}

3. taro

父：

 <Prolist prolist={ this.state.prolist }/>

子：

Index.propTypes = {
  prolist: PropTypes.array
}

七、语法

1. 微信小程序

             {{ 参数名 }} ---- 数据绑定
     wx:for="{{ 数据名 }}" --- 列表渲染
             wx:for-item ----- 可以指定数组当前元素的变量名，
            wx:for-index ----- 可以指定数组当前下标的变量名：
       wx:key="{{ 值 }}" ----- 列表中项目的唯一的标识符
   wx:if="{{condition}}" ----- 条件渲染
       bindtap="tapName" ----- 点击事件

2. uni-app

             {{ 参数名 }} ---- 数据绑定
             	  v-if="" ---- 条件渲染
             v-bind:class -----属性绑定
v-for="(item, index) in items" ---- 列表渲染	
v-on:click="counter "/@click ----- 点击事件

2. taro

在taro中语法跟react一样，事件要大小写class要写成className，使用组件开头字母要大写

   
{str}
   

   

以上在逆战疫情中总结。