微信小程序学习日记 L07 eventChannel 页面事件通信通道

页面间的通信在各种项目中都是很常见的功能,在小程序中如何在不同页面中使用组件间通信,
其实很简单,懒得看我叨叨的可以直接查看 🔗 官方的DEMO

阅读全文

微信小程序学习日记 L06 组件插槽

小程序的插槽用法和 Vueslot 几乎一模一样,现在组件内需要的地方加入插槽(<slot>)节点就行了。也可以直接查看小程序提供的 🔗 代码片段

<!-- 组件模板 P.S. 设置语言类型为html是因为wxml没有高亮 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

是不是很简单,需要使用到具名插槽的话,只需要在组件的 options 中开启 多slot支持 multipleSlots 就可以了。

阅读全文

微信小程序学习日记 L05 获取用户资料

在实际业务场景中,最常接触到的就是拉取微信登陆了,但单纯的一个点击按钮直接微信登录的需要获取多少微信权限呢?

最少的需要使用到1个微信开放接口:wx.login
如果需要获取用户头像和昵称,需要调用 wx.getUserProfile 方法 (wx.getUserInfo 已调整【尾声#1】),并且需要在绑定在按钮上 ,并会唤起授权提示;
如果需要获取用户手机号信息,需要在按钮上绑定 getPhoneNumber 事件。

一般来说非敏感信息可以直接调用,含有敏感信息的接口需要绑定在按钮上,在用户自行操作之后才可以调用。

阅读全文

微信小程序学习日记 L04 网络请求

在小程序中发送网络请求,需要使用微信提供的API,提供了5种:

  • 普通 HTTPS 请求(wx.request
  • 上传文件(wx.uploadFile
  • 下载文件(wx.downloadFile)
  • WebSocket 通信(wx.connectSocket
  • UDP 通信(wx.createUDPSocket

一般项目中使用频率最高的是 wx.requestwx.uploadFile

需要注意的是,小程序只可以跟指定的域名进行网络通信,需要事先设置通讯域名(服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置)。

可以查看 配置流程 了解一下具体注意项。

阅读全文

微信小程序学习日记 L03 生命周期

一开始按照 Vue 的思路下来,会认为生命周期很重要,需要完整的看一遍,但是其实整个小程序开发完之后,生命周期的概念其实并不是很重要,
大概分成 小程序 的生命周期 和 页面/组件 的生命周期。
这些生命周期函数中 主要就是使用 onShowonLoad 两个,用来获取和设置初始参数,发起请求等等。
其它的几个回调函数其实很少有用到,但是还是聊一聊吧。

阅读全文

微信小程序学习日记 L02 路由跳转

以前一直都是写的 Vue,所以在刚接触小程序的时候会疑惑,小程序是否也有和 Vue 一样有路由表,但是看完开放文档之后发现没有路由表,就很疑惑。
那小程序怎么去做页面跳转的呢?

首先,虽然小程序没有路由表,但是在全局配置文件(app.json)中有 pages 信息

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的文件进行处理。

阅读全文

微信小程序学习日记 L01 目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
刚刚接触到小程序,使用 微信开发者工具 新建完项目之后,会有一个这样的初始结构:

├─pages
│  ├─index
│  │     index.js
│  │     index.json
│  │     index.wxml
│  │     index.wxss
│  │      
│  └─logs
│        logs.js
│        logs.json
│        logs.wxml
│        logs.wxss
│          
├─utils
│     util.js
├─ app.js
├─ app.json
├─ app.wxss
├─ project.config.json
└─ sitemap.json
阅读全文

「 设计模式学习 」 L00 开坑贴 & 设计模式概览

设计模式是我在2018年在成都工作的时候听 肉山老师 的直播JavaScript 设计模式 导言的时候就想学习的一个东西,但是一直拖拖拖,虽然后来买了肉老师的 Chat 从 jQuery 里学习设计模式,但是看了一头雾水,后来同样买了肉老师推荐的书《设计模式:可复用面向对象软件的基础》,也是在家里吃灰了半年多。
一直想把整个设计模式都了解一下,不用吃透大概明了就可以,但是每次都提不起开坑的念头,如果再写成学习笔记的话,学习周期会大大拉长。

这次在项目的不断迭代中,我遇到了一个问题,就是 项目中的类型和状态管理,所以就想着是否有一个合适的设计模式来解决问题,所以就被逼迫着捡起来了……

阅读全文

Jeecg-boot 开发挖坑日记11 查询过滤器整理

如果不配置默认查询条件是全匹配,想实现模糊查询需求在查询值的前后加: *

Jeecg-boot支持不编码通过配置实现 模糊查询匹配查询范围查询不匹配查询 等规则,
但是页面查询字段,需跟后台 ControllerPage 的字段对应一致,就可以不需写后台代码自动生成查询条件SQL。

例如:想实现模糊查询需求在查询值的前后加: *

阅读全文

「 ReactJS 笔记 」 L01 井字棋

学习新东西的时候只看肯定是不够的, 所以既然 ReactJS 官方提供了一个学习的案例, 那么就一边写Demo, 一边读文档.

Tips: 我是直接看案例然后按照自己的理解去写的, 并没有按照官方案例亦步亦趋, 所以可能流程会不一样.

井字棋这个 demo 主要分为两部分:

棋盘

  • 点击棋盘空白格子可以落子, 落子之后交换棋手.
  • 棋格已经落子 / 有棋手获胜时不可落子
阅读全文