微信小程序入门简单讲解

小程序简介：

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

微信发布了一款自己研发的小程序开发工具：微信Web开发者工具
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
集合了开发，预览，发布为一体的开发工具。

一切准备就绪；
首先呢，展示并介绍一下小程序开发的文件目录结构：

在这里插入图片描述

pages：项目开发目录相当于vue脚手架中的src目录。
utils：存放封装的工具函数的目录。
app.js：小程序的入口js文件相当于vue中的main.js 通过App({})构造器实现。
app.json：小程序的全局配置。
app.wxss：小程序的全局css样式，全影响所有的页面外观。
project.config.json：工具的统一配置。
sitemap.json：用来配置小程序及其页面是否允许被微信索引。

一个完整的小程序页面包括4部分：

xxx.wxml:模板页面（也称视图，类似于html）常用标签：
view：相当于div
button：按钮
image：嵌入图像类似于img
text：添加文本相当于span
block：标签一个组织区域，最终不会渲染到页面上，相当于vue中的template
xxx.wxss:页面样式相当于css 注意：用rpx代表响应式单位类似于rem
xxx.js: 写页面逻辑的
xxx.json:页面的配置

首先一个重点：
小程序的全局配置 app.json :

"pages": [ //设置页面的路径
  "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
  "pages/logs/logs"
],
"window": { //设置默认窗口的表现形式
  "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
  "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
  "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字 自由设置
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
  "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
  "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
},
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
  "list": [{ //设置tab的属性，最少2个，最多5个
    "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
    "text": "首页", //tab 按钮上的文字
    "iconPath": "../img/a.png", //tab图片的路径
    "selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }],
  "color": "red", //tab 的字体颜色
  "selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
  "backgroundColor": "#2196f3", //tab 的背景色
  "borderStyle": "white", //边框的颜色 black/white
  "position": "bottom" //tab处于窗口的位置 top/bottom
  },
"networkTimeout": { //默认都是 60000 秒一分钟
    "request": 10000, //请求网络超时时间 10000 秒
    "downloadFile": 10000， //链接服务器超时时间 10000 秒
      "uploadFile": "10000", //上传图片 10000 秒
    "downloadFile": "10000" //下载图片超时时间 10000 秒
  },
"debug": true //项目上线后，建议关闭此项，或者不写此项

注：tabBar切换:
如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

1、当设置 position 为 top 时，将不会显示 icon
2、tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。但可以通过自定义tabBar来突破这个限制如何实现自定义TabBar?
核心实现思路：通过禁用app.json默认tabBar,创建一个自定义tabBar组件来实现
官方参考：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

每个页面都有一个对应的 json 文件，在 json 文件中写以下代码：

{
   "navigationBarTitleText":"页面名字"
}

页面之间传参：

自定义属性：将页面上的参数传递给js
  <view data-自定义名称="参数值">
 
 通过触发事件，在事件方法中接收
  let {index}=e.currentTarget.dataset
  deleteItem(e) {
    let {index}=e.currentTarget.dataset
    console.log(index)
  },
路由跳转传参:页面与页面之间传参

一、页面生命周期：

小程序注册完成后，加载页面，触发onLoad方法。
页面载入后触发onShow方法，显示页面。
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
当小程序后台运行或跳转到其他页面时，触发onHide方法。
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

Page({
  /**
   * 页面的初始数据
   */
  data: {    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {  
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },

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

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

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

二、小程序生命周期：

用户首次打开小程序，触发 onLaunch（全局只触发一次）。
小程序初始化完成后，触发onShow方法，监听小程序显示。
小程序从前台进入后台，触发 onHide方法。
小程序从后台进入前台显示，触发 onShow方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
小程序出错，触发onError

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
  },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
  },
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
  },
  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
  }
})

三、微信小程序的路由管理：

1.标签方式触发
	vue中:
	<router-link to="">
	
	小程序:<navigator url="要中转的路径">
	传参方式:<navigator url="要中转的路径?title=banana">
	接受:通过另一个页面在onLoad生命周期中接受
	
2.js(编程式)方式触发

	vue中:
	this.$router.push() 
	接受:this.$route.params.id
	
	小程序:<button catchTap="godoLogin">跳转到登录页</button>
		godoLogin(e){
		wx.navigation({
		let {id} = e.currentTarget.dataset
		url:`/pages/login/login?id=${id}`
		})
	}

四、数据请求：

JS原生：XMLHttpRequest,fetch
jQuery:$.ajax,$.getJSON,$.post(),$.get()
Vue:axios
React:fetch
微信小程序：wx.request() 与jQuery的$.ajax类似

wx.request({
  url:'', //请求的接口地址
  method:'get|post|put|delete',//请求方式 
  header:{},//设置请求头
  data:{}, //传参
  success() {}, //成功返回
  fail() {},// 失败返回
})

扩展：

修改窗口的背景色
使用 page 标签选择器，修改顶层节点的样式

page {
display: block;
min-height: 100%;
background-color: red;
}

有些手机不支持Object.assign方法，如果使用了该方法会出现莫名其妙的报错（并不会提示Object.assign is not function，而是导致调用了Object.assign方法的方法不能被调用）！

function assignObject(o, n) {
    for (var p in n) {
        if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p)))
            o[p] = n[p];
    }
}

推荐选择图标的地址-阿里巴巴矢量库
https://www.iconfont.cn/

原文链接：https://blog.csdn.net/weixin_49519738/article/details/109230980