微信小程序学习记录(一)
如何定义一个全局变量:
1,在根目录下app.js中添加
App({globalData: {g_isPlayingMusic : false,g_currentMusicPostId :null,doubanbase:"https://api.douban.com",self_reduction:"自减"} })
2,在js中访问我们的全局变量
var app = getApp(); //全局的 getApp()
函数可以用来获取到小程序实例。onLoad: function (options) {console.log(app.globalData.doubanbase); //打印doubanbase变量
console.log(app.globalData.self_reduction); //打印doubanbase变量
},
Success方法中如何访问data中的数据:that=this讲解
data: {tips:"提交成功!!" //先绑定数据},formSubmit: function (event) {var that = this wx.showModal({title: this.data.tips, //this.data.tips可以访问到数据content: '这是一个模态弹窗',success:function(e){var a = that.data.tips //这里必须用that.data.tips才能访问到数据!console.log(a)}})
动态设置导航栏标题
设置标题最好是在onReady函数中,因为此时页面已经渲染完成。
生命周期的函数的执行顺序:onLoad-->onShow-->onReady
onLoad指页面初始化,页面初始化的过程中,是不应该操作和UI相关的东西的,因为页面还没有正式生成。
//生命周期函数--监听页面加载onLoad: function (options) {console.log("Onload");},//生命周期函数--监听页面初次渲染完成onReady: function () {console.log("onReady");wx.setNavigationBarTitle({ //设置标题title: '当前页面'})},//生命周期函数--监听页面显示onShow: function () {console.log("onShow");},
关于API
API状态码:
404:资源没有找到。
400: 参数错误。
200: 查询操作-get请求成功
201: post创建资源成功
202: 更新成功。
401: 未授权。
403: 当前资源被禁止。
500: 未知错误。
Postman:HTTP请求模拟工具
Postman : 下载地址
win7下安装出错?暂时禁用在您安装Postman时运行的任何防病毒程序。
scroll-view组件:横向滚动
http://blog.csdn.net/u014360817/article/details/52658760
http://blog.csdn.net/u013778905/article/details/60332971
小程序选择器对于first-child、:last-child支持。
微信小程序地图如何设置满屏?
将地图的高度设置为100vh, 宽度设置为100%即可。
MVC
home.js -- C层负责:数据绑定最后关联到xml中
home-model.js -- M层负责:业务逻辑处理
Number() 函数
Number() 函数把对象的值转换为数字。如果对象的值无法转换为数字,那么 Number() 函数返回 NaN。
商品总价格计算。
pointer-events
对某一个元素比如div采用div{pointer-events:none}即可让这个HTML元素(包括它的所有子孙元素)失去所有的事件响应。鼠标焦点会直接无视它,click、mouseover等所有事件会穿透它到达它的下一级元素
specifies under what circumstances a given element can be the target element for a pointer event
product.js页面:
//检测缓存中counts变化 点击才能触发// detectStorage: function (index,i) {// var cartData = cart.getCartDataFromLocal(),// productsArr = this.data.productsArr;// console.log(productsArr);// if (cartData[index].counts != productsArr[i].counts) {// productsArr[i].counts = cartData[index].counts;// }// this.setData({// productsArr: productsArr// })// },
问:微信小程序在手机上只有打开调试模式的时候才能用
答:域名不合法、不一致 https。
为什么域名不一致开发者工具就能请求到数据呢,应该是因为开发者工具没有验证请求的域名和微信小程序设置的rquest合法域名是否一致的操作,所以开发者工具就能请求的到,而且手机中有这一步操作的,所以手机不能成功请求。
链接1
<text>标签之间有间隔 -- 用display:flex解决
scroll-view 横向滚动
要想横向滚动,首先要先把子元素设置成一行
要对子元素进行display:inline-block 【或者display:inline-flex;】,容器进行 white-space: nowrap;
.scroll-ms{white-space: nowrap; } .ms_pro{display: inline-block;width: 249rpx;height: 322rpx;background: #f3f3f3;margin-right: 20rpx; }
分享生成海报
小程序如何生成带参数二维码?
微信小程序之生成图片分享 微信小程序保存图片分享到朋友圈功能
关于小程序未上线二维码识别功能开发 二维码扫码空白重定向
微信小程序JS导出和导入
Promise 处理异步调用的一大利器
promisify.js:
module.exports = (api) => {return (options, ...params) => {return new Promise((resolve, reject) => {api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);//花括号叫目标对象,后面的是源对象。对象合并是指:将源对象里面的属性添加到目标对象中去,若两者的属性名有冲突,后面的将会覆盖前面的});} }
参考:使用Promise简化回调
微信小程序使用Promise
Class和function
class的功能是对function的打包,当你需要打包多个function成一个模块(class)时,就用class而不是裸的function。
小程序中:a : function(){}是什么格式?
使用JSON语法创建JavaScript对象时,属性值不仅可以是普通字符串,也可以是任何数据类型,还可以是函数、数组,甚至可以是另外一个JSON语法创建的对象。
json中的值是map形式 key->value。a:function(){} 中 a是key,function() 是 value
var person={name:'tom',son:{//使用JSON对象为其指定一个属性name:'nono',grade:1},say:function(){ //使用JSON语法为person直接分配一个方法alert('heloo');} }
function() {} 是匿名函数。
a: function(){} 外部一定有一对 { },是Map的一个元素,a作为键名,匿名函数作为键值
参考:这里
Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, ...sources) 复制对象:
var object = {a:1,b:2,c:3,d:4 } var copy=Object.assign({},object); console.log(copy); //{a: 1, b: 2, c: 3, d: 4}
合并对象:
var ob1 = {a:11}; var ob2 = {b:22}; var ob3 = {c:33};var bing = Object.assign({},ob1,ob2,ob3); console.log(bing); //{a: 11, b: 22, c: 33} console.log(ob1); //{a: 11}
使用回调解决onLoad与onLaunch执行顺序问题
问题:如果不经过其他页面直接进专家页面,网络请求会先请求数据,再走user请求 这时候会报错 因为请求数据时没有携带token值。
原因:onLoad在onLaunch还没执行完时先执行了。
解决:让其先走user 获取token后 再请求数据。 回调解决顺序问题。
Page页面判断一下当前是否有token值,如果没有(第一次)则定义定义一个app方法(回调函数)app.tokenCallback = res => {...}。
App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。因为回调函数是在Page里面定义的所以方法作用域this是指向Page页面。
在app.js中
// token.getTokenFromServer() 改为以下token.getTokenFromServer((res)=>{if (this.tokenCallback) {this.tokenCallback(res)}});
在doctor.js中
var token = wx.getStorageSync('token')if(token){this._loadData();}else{app.tokenCallback = res => { 等同于下面代码 this._loadData();}// app.tokenCallback=function(res){// console.log(res);// console.log('no');// }}
参考:
微信小程序使用回调解决onLoad与onLaunch执行顺讯问题的终极分析
微信小程序 res =>的意义及userInfoReadyCallback函数的作用
微信小程序onLaunch异步,首页onLoad先执行?
微信小程序checkbox样式修改
纯正商业级应用-微信小程序开发实战
关于移动端中文字体。
苹果:苹方 安卓:思源。
对于文字来说上下之间是有空白间距的,在组件中要尽可能消除这些无意义的间距。【font-size: 24rpx;line-height: 24rpx;】
异步性能比较好,同步需要等待
import引用时使用:相对路径(../../) 组件可以使用绝对路径(/)
组件的属性是可以被外界访问到的,data是私有的不能被访问。
滚动监听
onPageScroll:function(e){console.log(e);//{scrollTop:99} }
小程序异步处理:
- 纯粹callback 回调地狱 剥夺了函数return的能力
- promise 代码风格 多个异步等待合并 不需要层层传递callback
- async、await ES2017 目前小程序不支持
// promise的精髓:它用对象的方式保存了异步调用的结果,而promise本身作为一个对象,它是可以赋值给一个变量的,而这个变量可以在我们的代码中到处传递,它不需要附带任何的回调函数 (只在你需要去取异步调用的结果的时候才需要附加回调函数)const promise = new Promise((resolve, reject) => {//pending-进行中 fulfilled-已成功 rejected-已失败 wx.getSystemInfo({success: res => resolve(res),fail: error => reject(error)})})promise.then(res => console.log(res),error => console.log(error))
bookMiodel.getList() //API:请求1.then(res=>{console.log(res); //请求1的结果return bookMiodel.getListCount() //API:请求2 这个then方法的调用结果又返回一个Promise,所以可以在外面用(.then)接收到//请求2的结果 }).then((res)=>{console.log(res);//请求2的结果return bookMiodel.getListCount() //API:请求3 }).then((res)=>{console.log(res); //请求3的结果})
多次点击后,navigator跳转无反应,使用redirect关闭当前界面实现跳转。
navigator跳转分为两个状态一种是关闭当前页面,一种是不关闭当前页面。无法跳转可能是点击过多之前的页面并没有关闭导致系统无法执行当前跳转。【参考】
微信小程序 报错:define is not defined
即使是在官方文档中代码片段:在开发者工具中预览效果 也是同样报错。一番搜索,问题出在代理上,重新设置重启恢复正常。资料
小程序评论板块加入emoji表情
转载于:https://www.cnblogs.com/lsdk/p/8330217.html
微信小程序学习记录(一)相关推荐
- 微信小程序学习记录【1】【项目结构构成、官方文档构成、基本配置】
微信小程序学习记录[1][项目结构构成.基本配置]文章目录 项目结构构成 官方文档结构 基本配置 1. 小程序配置 1.1 app.json 1.2 page(页面名).json 1.3 sitema ...
- json 微信小程序 筛选_微信小程序学习记录
全局配置 app.json 文件用来对微信小程序进行全局配置. pages 类型为 String Array 是 页面路径列表,创建目录和更改时会自动更改文件. 用于指定小程序由哪些页面组成,每一项 ...
- 微信小程序学习记录——4.框架-视图层
文章目录 1.WXML 数据绑定 简单绑定 运算 组合 列表渲染 wx:for block wx:for wx:key 条件渲染 wx:if block wx:if wx:if vs hidden 模 ...
- 微信小程序学习记录(二)MQTT连接阿里云
准备 微信小程序开发工具 MQTT.js库:https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js点开链接,右击页面内容另存到电脑. 开始 将MQTT.js复制到 ...
- 微信小程序学习记录——5.组件
文章目录 1.视图容器 view scroll-view swiper swiper-item movable-view movable-area movable-view cover-view co ...
- 微信小程序学习记录——3.框架-逻辑层
文章目录 1.逻辑层简介 2.注册程序 App() onLaunch,onShow参数 getApp() 3.场景值 4.注册页面 Page() 生命周期 生命周期中的函数 初始化数据 页面相关事件处 ...
- 微信小程序学习记录(一)小实战——加法计算器
小实战--加法计算器 在[app.json]文件下添加计算器页面: "pages": ["pages/calc/calc",//新建计算器页面"pag ...
- 微信小程序学习记录2(js中数组和对象)
1.数组 1.数组的创建: 推荐方式: var array =[] 2.js的数组可以装不同类型的变量 例如: array=['张三',123,aabb] 3.利用下标索引 4.数组的一些方法: .l ...
- 2020微信小程序学习报告.2.17-3.1.(三)
微信小程序学习报告应学校课程要求,特此记录首先,小程序知识点: wx.request的使用:发https请求,一个小程序同时只能有5个网络请求,https的参数里,url是接口地址,method是请求 ...
最新文章
- php云人才系统调用,PHP云人才系统3.0正式发布
- 1、Locust压力测试环境搭建
- 前端 网络安全 前端优化 代码架构 笔记
- 字节跳动大规模实践埋点自动化测试框架设计
- 钉钉自带浏览器版本过低,导致Object.assign不兼容...
- BZOJ3324 : [Scoi2013]火柴棍数字
- sublime text 3 3143
- Qt ui-setupUi(this)的作用
- 卷积,DFT,FFT,图像FFT,FIR 和 IIR 的物理意义。
- .NET客户端实现Redis中的管道(PipeLine)与事物(Transactions)
- 第五十篇、OC中常用的第三插件
- java batik_batik详解2
- mac dmg包签名及公证
- android sdk救黑砖,华为EC6108 V9C 8G 救黑砖教程及固件下载
- Windows Server 2008 各版本介绍
- 把鼠标指针换成自定义图片 傻瓜教程
- 第八章、使用matplotlib绘制高级图表
- 成功入职字节跳动,分享我的八面面经心得!
- ZipFile解压文件
- dnf压爆服务器挑战网站,DNF手游压爆服务器挑战网址分享
热门文章
- 南昌大学计算机与科学专业就业前景,南昌大学好就业吗?附南昌大学就业率最高的专业名单...
- ADP124ARHZ-1.8-R7 5.5 V输入、500 mA、低静态电流、CMOS线性调节器,31种固定输出电压选项
- 某类疾病发生率的数据最小二乘法拟合
- 压电陶瓷材料测试需要知道的13个基本参数
- keepass安卓版哪一款好_公认五大最好用的安卓手机系统,你用过哪些,哪个才最好用呢?...
- 计算机科学采用通知,关于采用合同模板的通知 科研〔2019〕134号
- 【期末大作业】二手房Python爬虫+Flask前端展示+Echarts可视化大项目
- php nuke是什么,phpnuke中文站 - phpnuke安装步骤
- CLion断点单步调试
- 电力电子技术期末整理