当前位置: 首页 > news >正文

微信小程序知识点归纳(一)

前言:适用于有一定基础的前端开发同学,完成从网页开发到小程序开发的知识转换。

           先立框架,后砌墙壁

回顾:了解微信小程序开发流程-CSDN博客

初始页面结构,三部分pages、utils、配置,分别存放页面、工具类函数、全局文件。

全局文件常用的三个:app.js、app.json、app.wxss,分别是项目入口、页面配置、全局样式

其余:

  • .eslintrc:配置规则集和插件,用于检查代码质量,规范编码的
  • project.config:个性化配置,以及配置项目的打包;后面挨着的project.private.config是他孪生兄弟,可以覆盖前者配置
  • sitemap:小程序的结构和组织方式,让微信可以搜索到该小程序

配置是基础,优先掌握

一、配置

1、全局配置

在app.json中的全局配置参数,常见的有:

  • navigationBarTextStyle 顶部背景颜色,只支持设置黑色和白色
  • navigationBarTitleText   顶部全局标题(即小程序名称)
  • enablePullDownRefresh下拉刷新
  • onReachBottomDistance 上拉触底

小程序官网_页面配置对于字段的用法和含义写的很全面

2、新建页面

小程序页面分两种,tabBar和非tabBar,tabBar就是最底下的导航栏

备注:同样可参考小程序官网_全局配置

1.1 tabar页面

/***app.json****/
若要加新页面,在pages和tabBar中添加地址、文本和图标即可 
在pages里写了地址,pages文件夹中会自动生成页面文件的
{"pages": ["pages/index/index","pages/shopping/shopping"],"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/images/tabs/index.png","selectedIconPath": "/images/tabs/index-active.png"},{"pagePath": "pages/shopping/shopping","text": "商城","iconPath": "/images/tabs/shopping.png","selectedIconPath": "/images/tabs/shopping-active.png"}]}
}

1.2 非tabBar页面

就是直接点击即跳转的页面,只需要在上面pages里新增个地址即可。

二、导航

1、声明式

1、跳转到tabBar页面
<navigator url="/pages/orderDetail/orderDetail" open-type="seitchTab"></navigator >2、到非tabBar页面,区别仅在于open-type参数
<navigator url="/pages/orderDetail/orderDetail" open-type="navigate"></navigator >3、传参
只需要把参数拼接在url后面即可
<navigator url="/pages/orderDetail/orderDetail?test=12&price=78">传参</navigator>
接收参数
在跳转到的页面的onload方法里,可接受到传递来的参数
onLoad(options) {console.log(options);
},4、回退
(只在非tabBar页面生效)
delta代表回退层级,默认为1
<navigator open-type="navigateBack" delta="1"></navigator>

2、编程式

1、跳转到tabBar页
在页面wxml添加
小程序中 bindtap 就相当于 click
<button bind:tap="gotoHome">跳转</button>
在对于js文件中调用方法即可gotoHome(){wx.switchTab({url: '/pages/index/index',})}2、跳转到非tabBar页面
只需要把switchTab换成navigateTo就行了
<button bind:tap="goDetail">详情</button>
goDetail(){wx.navigateTo({url: '/pages/orderDetail/orderDetail',})}3、传参
和声明式一样,把参数拼接在url后面4、回退
参数为空则默认回退1层<button bind:tap="goBack">回退</button>goBack(){wx.navigateBack()},

三、生命周期

分为2类,应用生命周期和页面生命周期

类似于网页,都是初始化->渲染显示->销毁 的过程;不同点在于多了个周期:onHide隐藏在后台运行

1、应用

在全局入口文件app.js中控制

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

2、页面

在页面自己的文件夹下js文件中控制

Page({onLoad(options) {},        // 监听页面加载,一个页面只调用1次onReady() {},              // 监听页面初次渲染完成,一个页面只调用1次onShow() {},               // 监听页面显示onHide() {},               // 监听页面隐藏onUnload() {},             //-监听页面卸载//初始化时还会默认有下面几种监听事件onPullDownRefresh() {},    // 监听用户下拉动作onReachBottom() {},        // 页面上拉触底事件的处理函数onShareAppMessage() {}     // 用户点击右上角分享
})

http://www.lryc.cn/news/346108.html

相关文章:

  • wangEditor富文本编辑器与layui图片上传
  • 爬虫学习:XPath提取网页数据
  • 【雅思写作】Vince9120雅思小作文笔记——P1 Intro(前言)
  • 【面试干货】HTTPS 工作原理
  • Cocos Creator 中编码规范 (6)
  • Vue3:menu导航栏出现多个同一跳转路径的菜单处理
  • SAM轻量化应用Auto-SAM、Group-Mix SAM、RAP-SAM、STLM
  • 深度优化搜索DFS使用详解,看这篇就够了!!!
  • Apache SeaTunnel 正式发布2.3.5版本,功能增强及多个Bug修复
  • interview_bak
  • layui 数据表格 自动定位新增行位置
  • window10下安装ubuntu系统以及docker使用
  • Netty核心组件介绍
  • 代码审计平台sonarqube的安装及使用
  • C++ 使用nlohmann/json.hpp库读写json字符串
  • 3GPP官网下载协议步骤
  • 【JAVA】Git 的基本概念和使用方式
  • C++多态实现原理详解
  • [数据集][目标检测]交通灯检测数据集VOC+YOLO格式2600张1类别
  • 关于测试用例
  • 一起长锈:3 类型安全的Rust宏(从Java与C++转Rust之旅)
  • 《金融研究》:普惠金融改革试验区DID工具变量数据(2012-2023年)
  • Prompt|Kimi高阶技巧,99%的人都不知道
  • 采购管理软件:采购自动化提高效率的5种方式
  • Android App开机启动
  • 服务器直连电脑(盒子直连电脑)电脑需要设置为固定ip才能访问盒子
  • 【设计模式】之代理模式(两种)
  • 【工具篇】-什么是.NET
  • OmniReader Pro mac激活版:智慧阅读新选择,开启高效学习之旅
  • Stable Diffusion学习记录