小程序开发基础学习

文章目录

小程序与普通网页开发的区别
小程序开发流程
如何让vscode支持编写小程序代码
微信开发者工具的安装及使用
注意实现
快速创建一个小程序
小程序的目录结构
小程序4种文件类型
js
WXSS
image组件
text组件
数据绑定
事件绑定及事件处理函数
tabbar
路由
页面的生命周期
转发

小程序与普通网页开发的区别

网页开发渲染线程和脚本是一个过程，而小程序二者是分开的，分别运行在不同的线程
网页开发者可以操作DOM和BOM，小程序缺少操作DOM和BOM的方法，导致了例如JQuery，Zepto等在小程序中无法运行
小程序的运行环境与nodejs环境也不相同，所以一些npm的包在小程序中也是无法运行的

从小程序基础库版本2.2.1开始支持使用npm安装第三方包

小程序开发流程

注册小程序账号

为了获取AppID，AppID就显示我们的身份证一样，是唯一的而且很重要，后续的所有开发流程会基于这个AppID来完成
直接在微信小程序的官网注册
通过微信公众号注册

条件是已经有微信公众号(并且企业级，个人不可以)
优点是如果公众号已经认证过了，小程序不需要再次认证，省去了认证时间和费用

安装开发者工具
开发/测试/上传代码（上传到微信服务器）
提交审核
发布上线发布小程序以后，我们才可以在微信中搜索到我们开发的小程序
错误查询/性能监控登录官网->开发->运维中心

如何让vscode支持编写小程序代码

微信开发者工具的安装及使用

注意实现

小程序项目中不能嵌套小程序项目
创建小程序项目，不能是云开发，代码块

快速创建一个小程序

有AppID 官网-> 开发-> 开发设置->中找到AppID
没有AppID，我们可以使用小程序提供的测试号

小程序的目录结构

pages 这里的每个文件夹都代表一个小程序的页面
app.js 全局逻辑代码
app.json 全局配置文件
app.wxss 全局样式文件

小程序4种文件类型

js逻辑文件
json 配置文件
wxml 小程序框架设计的，套标签语言，结合小程序基础组件，事件系统可以构建出页面结果
wxss 小程序样式文件

js

脚本执行顺序
当app.js执行结束后，小程序会按照开发者在app.json中定义的pages的顺序，逐一执行
作用于同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同nodejs更为相似，在文件中什么的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响

WXSS

小程序的尺寸单位rpx 可以根据屏幕宽度进行自适应, 规定屏幕宽度750px，如果在iphone6上，屏幕宽度为375物理像素，则750rpx = 375px，，1rpx = 0.5物理像素
定义在app.wxss中的样式为全局样式，它会被注入到每个小程序页面中，在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的配置
样式导入在css中，开发者可以这样应用另一个样式文件: @import url('./app.css') 在小程序中，我们依然可以这样实现引用写法是 @import './app.css'
官方样式库: 点我
选择器小程序目前支持的选择器有：

选择器	样例	描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有view组件
element,element	view,checkbox	选择所有的view和checkbox组件
::after	view::after	在view组件后插入
::before	view::before	在所有view组件前插入

image组件

image组件默认宽度300ox，高度225px(320 * 240)

注意: 如果我们想让image组件上的高度随宽度等比例自适应，应该给image设置mode例如：

text组件

除了文本节点以外的其他节点都无法长按选中

数据绑定

内容

{{message}}

属性

运算符

事件绑定及事件处理函数

事件是视图层到逻辑层得通讯方式，可以将用户的欣慰反馈到逻辑层处理
事件对象是可以携带额外信息如：id，dataset

事件分类
- 冒泡事件
- 非冒泡事件
  -事件绑定
- 事件绑定得写法同组件得属性，以key,value得形式
key 以bind或者catch，然后跟上事件得类型，如bindtap、catchtap
** bind事件绑定不会阻止事件冒泡，catch事件绑定可以阻止冒泡事件向上冒泡**
事件对象
- type代表事件类型
- tagName 当前组件得类型
- dataset 事件源组件上又data-开发得自定义属性得集合

以data-开头、多个单词由-链接，大写会自动转小写，驼峰-后首字母会自动大写

tabbar

  "tabBar": {
    "color": "#000000", // 未被选中时得颜色
    "selectedColor": "#000000", // 选中时文字颜色
    "borderStyle": "black", // 上边框
    "position": "bottom", // tabBar位置
    "backgroundColor": "#ffffff", // tabBar背景颜色
    "list": [{ // tabBar列表 最少两项，，最多五项
      "pagePath": "pagePath",  // 选项路径
      "text": "text", // 选项文字
      "iconPath": "iconPath", // 选中前icon
      "selectedIconPath": "selectedIconPath" // 选中后icon
    },
    {
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  }

路由

wx.switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面
wx.relaunch 关闭所有页面并打开指定页面
wx.redirectTO 关闭当前页面，跳转到应用内某个页面，但是不允许跳转到tabBar
wx.navigateTo 保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabBar页面，使用wx.navigateBack 可以返回原页面，小程序中页面栈最多十层
wx.navigateBack 关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages获取当前的页面栈，决定需要返回几层

页面的生命周期

onload 监听页面加载 只在页面初始化时候加载一次
onshow 监听页面显示 每次显示页面都会执行
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载

只有在页面js中监听了 onShareAppMessage 方法右上角才会有转发

自定义转发内容

只需要在时间处理函数中return一个对象

/**
   * 用户点击右上角分享
*/
  onShareAppMessage: function () {
    console.log('分享');
    return {
      title:'自定义title',
      path: '/pages/index/index',
      imageUrl: "https://www.baidu.com/img/bd_logo1.png?where=super"
    }
  }