微信小程序开发笔记(二)
2024-04-13 17:38:15
1、import和include
import是用来导入模板。
includes用来导入除模板以外的内容。
2、wxss引用
@import './test_0.wxss'3、App构造器
App({onLaunch: function(options) {},onShow: function(options) {},onHide: function() {},onError: function(msg) {},globalData: 'I am global data'
})4、小程序全局共享数据
// app.js
App({// 全局共享数据globalData: {userInfo: null}
})// 其他页面脚本other.js
var appInstance = getApp()
console.log(appInstance.globalData.userInfo) // 输出: userInfo5、 Page构造器
Page({data: { text: "This is page data." },onLoad: function(options) { },onReady: function() { },onShow: function() { },onHide: function() { },onUnload: function() { },onPullDownRefresh: function() { },onReachBottom: function() { },onShareAppMessage: function () { },onPageScroll: function() { }
})6、修改构造器的data注意事项
* 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
* 由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
* 不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。7、API一般调用的约定
wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。
如未特殊约定，多数 API 接口为异步接口 ，都接受一个Object作为参数。
API的Object参数一般由success、fail、complete三个回调来接收接口调用结果，示例代码如代码清单3-17所示，详细说明如表3-9所示。
wx.get* 开头的API是获取宿主环境数据的接口。
wx.set* 开头的API是写入数据到宿主环境的接口。通过wx.request发起网络请求示例：wx.request({url: 'test.php',data: {},header: { 'content-type': 'application/json' },success: function(res) {// 收到https服务成功后返回console.log(res.data)},fail: function() {// 发生网络错误等情况触发},complete: function() {// 成功或者失败后触发}
})8、常见的事件类型
类型 触发条件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发当事件回调触发的时候，会收到一个事件对象，对象的详细属性如下表所示。
属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。9、事件对象示例
<!-- page.wxml -->
<view id="outer" catchtap="handleTap"><view id="inner">点击我</view>
</view>// page.js
Page({handleTap: function(evt) {// 当点击inner节点时// evt.target 是inner view组件// evt.currentTarget 是绑定了handleTap的outer view组件// evt.type == “tap”// evt.timeStamp == 1542// evt.detail == {x: 270, y: 63}// evt.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]// evt.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]}
})10、flex布局可设置的容器的属性
display:flex;flex-direction:row（默认值） | row-reverse | column |column-reverseflex-wrap:nowrap（默认值） | wrap | wrap-reversejustify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenlyalign-items:stretch（默认值） | center | flex-end | baseline | flex-start11、微信小程序自带的提示框
wx.showToast({ // 显示Toasttitle: '已发送',icon: 'success',duration: 1500})11、微信小程序自带的模态框
wx.showModal({title: '标题',content: '告知当前状态，信息和解决方法',confirmText: '主操作',cancelText: '次要操作',success: function(res) {if (res.confirm) {console.log('用户点击主操作')} else if (res.cancel) {console.log('用户点击次要操作')}}})12、发起HTTPS网络通信wx.request
// get请求 通过data参数传递数据wx.request({url: 'https://test.com/getinfo',data: { id:1, version:'1.0.0' },success: function(res) {console.log(res)// 服务器回包信息}})// post请求 请求的包体为 {"a":{"b":[1,2,3],"c":{"d":"test"}}}wx.request({url: 'https://test.com/postdata',method: 'POST',header: { 'content-type': 'application/json'},data: {a: {b: [1, 2, 3],c: { d: "test" }}},success: function(res) {console.log(res)// 服务器回包信息}})13、request常见代码（状态处理，响应码判断，错误处理）
var hasClick = false;Page({tap: function() {if (hasClick) {return}hasClick = truewx.showLoading()wx.request({url: 'https://test.com/getinfo',method: 'POST',header: { 'content-type':'application/json' },data: { },success: function (res) {if (res.statusCode === 200) {console.log(res.data)// 服务器回包内容}},fail: function (res) {wx.showToast({ title: '系统错误' })},complete: function (res) {wx.hideLoading()hasClick = false}})}})微信小程序开发笔记(二)相关推荐
- 微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
- 微信小程序开发笔记二—底部导航栏tabar
文章目录 一.实现效果 二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件 三.注意事项 一.实现效果 首先展示一下实现效果 底部导航栏有三个按键 ...
- 微信小程序开发笔记—设置页面密码
文章目录 一.功能概述 二.实现效果 三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
- 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
- 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
- 微信小程序开发笔记——wsdchong
微信小程序开发笔记 一.小程序简介 小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
- 微信小程序开发笔记 进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录 一.前言 二.onfire.js介绍 三.API介绍 四.实例应用 五.onfire源码 六.实例源码 一.前言 微信小程序开发笔记--导读 二.onfire.js介绍 一个简单实用的事件订 ...
- 微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
- 微信小程序开发笔记 支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录 一.前言 二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权 三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署 四.小程序调用 4. ...
最新文章
- SpringBoot 三招组合拳，手把手教你打出优雅的后端接口
- MVP介绍以及优化封装
- hashMap和hashTable的区别（个人总结）
- Sprint 冲刺第三阶段第6-10天
- numpy基础——数组的组合与分割
- Mysql5.7 ZIP 压缩包非安装版的安装方式
- Shiro的authc过滤器的执行流程
- 【转】C++学习二 vector的用法(使用sort对于vector排序)
- LeetCode 669. 修剪二叉搜索树
- eja智能压力变送器工作原理_压力变送器的原理、接线和安装方法
- 将DHCP从win2000转移到2003上
- session理论分析
- 怎么在另一台小米手机上云服务器,小米云服务使用手册
- python ppt自动生成目录_利用python-pptx库读写操作PPT,批量自动生成或修改的PPT
- 数学建模四大模型总结
- 施耐德c语言编程软件,施耐德PLC讲座 IEC语言梯形图
- 【无人驾驶系列一】激光雷达（LiDAR）在无人驾驶技术中的应用
- 基于JSP实现医院病历管理系统，程序员如何在工作中自我增值
- TestFlight用法（iOS APP官方测试工具）
- 企业级微信小程序实战详解