微信小程序学习记录(一)
如何定义一个全局变量:
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合法域名是否一致的操作,所以开发者工具就能请求的到,而且手机中有这一步操作的,所以手机不能成功请求。
<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;
}
分享生成海报
微信小程序之生成图片分享 微信小程序保存图片分享到朋友圈功能
Promise 处理异步调用的一大利器
promisify.js:
module.exports = (api) => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);//花括号叫目标对象,后面的是源对象。对象合并是指:将源对象里面的属性添加到目标对象中去,若两者的属性名有冲突,后面的将会覆盖前面的
});
}
}
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函数的作用
纯正商业级应用-微信小程序开发实战
关于移动端中文字体。
苹果:苹方 安卓:思源。
对于文字来说上下之间是有空白间距的,在组件中要尽可能消除这些无意义的间距。【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
即使是在官方文档中代码片段:在开发者工具中预览效果 也是同样报错。一番搜索,问题出在代理上,重新设置重启恢复正常。资料
iphone7下使用<movable-area>页面卡顿,其他手机测试正常。
使用IOS原生滚动属性 overflow-scrolling:touch 参考
微信小程序学习记录(一)的更多相关文章
- 微信小程序bug记录与解决
微信小程序bug记录 textarea textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工 ...
- 微信小程序 学习资料
微信小程序 学习资料 资料名称 网址 官方教程 https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18110517
- 【微信小程序学习笔记】入门与了解
[微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 微信小程序学习笔记一 小程序介绍 & 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发 记录
采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因 ...
- 微信小程序学习
官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...
- 微信小程序学习笔记(阶段一)
一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...
随机推荐
- 通过减少 IO 实现性能的优化
原始地址见 这里 本文是工作中一点点简单的思考,不能保证是完全正确的,可能也仅仅是适用于部分场景. 场景 1:获取用户关注的好友列表中,每个好友的名字.头像等信息. 在很多公司中,不同的服务是由不同的 ...
- 【坑】SpringMvc 处理JSON 乱码
文章目录 前言 方法 前言 在使用 springMvc 的时候,如果向前台返回 JSON 数据,JSON 中的中文会乱码: 即使你在配置了全局的信息编码拦截器,也无济于事: 原因大抵是,JSON 的内 ...
- PAT(B) 1052 卖个萌(Java:0分 待解决,C:20分)
题目链接:1052 卖个萌 (20 point(s)) 题目描述 萌萌哒表情符号通常由"手"."眼"."口"三个主要部分组成.简单起见,我们 ...
- Python中的动态属性与描述符
动态属性与属性描述符 属性描述符是什么? 在解释属性查找顺序之前我们需要了解Python中的属性描述符,属性描述符作为其他类对象的属性而存在,实现了特殊方法中的get.set.delete中的一种 ...
- Mongodb命令行导入导出数据
第一步,找到mongodb安装目录第二步,从命令行进入mongodb安装目录下的bin目录第三步(1),导出数据命令(导出的文件有两种格式:json/csv,此处导出的是json文件,对于导出CSV文 ...
- spring中EL解析器的使用
SpEL对表达式语法解析过程进行了很高的抽象,抽象出解析器.表达式.解析上下文.估值(Evaluate)上下文等对象,非常优雅的表达了解析逻辑.主要的对象如下: 类名 说明 ExpressionPar ...
- 用ASP.NET Web API技术开发HTTP接口(二)
在第一部分,我们创建了一个基本的ASP.NET Web API项目,新建成功了数据表,然后添加了一些测试数据,最后创建了API控制器,用json格式把数据表里面的内容成功输出到浏览器上.接下来我们将继 ...
- 测试库异常down分析(abnormal instance termination)
客户测试库,down问题分析,根据alert 的问题指向,实例异常终止,但是无其它有价值的信息 Terminating the Instance Due to Error Out-Of-Memory( ...
- javascript/js实现 排序二叉树数据结构 学习随笔
二叉树是一种数据结构.其特点是: 1.由一系列节点组成,具有层级结构.每个节点的特性包含有节点值.关系指针.节点之间存在对应关系. 2.树中存在一个没有父节点的节点,叫做根节点.树的末尾存在一系列没有 ...
- UI5-技术篇-Implementing Expand Entity/Entity Set
转载:https://blogs.sap.com/2014/07/18/implementing-expand-entityentity-set/ Requirement Considering a ...