如何定义一个全局变量:

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)
}
})
为什么在success下用this.data.tips访问不到数据?因为,success方法调用方,不是page(所以不能用this),所以是取不到data下面的tips。
 如何处理:把this保留一下将其赋值给that : that = this。然后用that.data.tips就能访问到数据了。
 

动态设置导航栏标题

设置标题最好是在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表情

iphone7下使用<movable-area>页面卡顿,其他手机测试正常。

使用IOS原生滚动属性 overflow-scrolling:touch 参考

微信小程序学习记录(一)的更多相关文章

  1. 微信小程序bug记录与解决

    微信小程序bug记录 textarea textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工 ...

  2. 微信小程序 学习资料

    微信小程序 学习资料 资料名称 网址 官方教程 https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18110517

  3. 【微信小程序学习笔记】入门与了解

    [微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...

  4. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  5. 微信小程序学习笔记一 小程序介绍 & 前置知识

    微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

  6. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. 微信小程序开发 记录

    采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因 ...

  8. 微信小程序学习

    官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...

  9. 微信小程序学习笔记(阶段一)

    一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...

随机推荐

  1. MySQL 索引最佳实践

    原文请关注 这里 这是 文章 的翻译,在翻译过程中,会对其中涉及到的语句加上一些个人理解以及 SQL 语句的执行,并进行特别的标注. 1. 你做了一个很棒的选择,因为: 对于普通开发者和 DBA,理解 ...

  2. 介绍几款常用的在线API管理工具

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...

  3. python中zipfile模块实例化解析

    文章内容由--“脚本之家“--提供,在此感谢脚本之家的贡献,该网站网址为:https://www.jb51.net/ 简介: zipfile是python里用来做zip格式编码的压缩和解压缩的,由于是 ...

  4. Scratch零基础起步攻略(一)

    通常,类似这样的文章开头总要阐述一大段关于编程的重要性,还有自己的专业性.权威性等等,我就都省掉了…… 简单介绍一下自己,从事计算机编程教育前前后后有近20年了,面对了不同年龄层次的学员,大部分跟着我 ...

  5. JS ES6中export和import详解

    1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...

  6. Centos7+puppet+foreman,模板介绍

    一.简介 provision templates 是灵活部署合适的操作系统的核心,模板包括有好几类 1.模板种类 pxe相关的模板,比如pxelinux,pxegrub,pxegrub2 kickst ...

  7. Spring Cloud Alibaba学习笔记(4) - Feign配置与使用

    什么是Feign Feign是一个声明式Web Service客户端. 使用Feign能让编写Web Service客户端更加简单, 它的使用方法是定义一个接口,然后在上面添加注解,同时也支持JAX- ...

  8. 在论坛中出现的比较难的sql问题:28(循环查询表来实现递归)

    原文:在论坛中出现的比较难的sql问题:28(循环查询表来实现递归) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必 ...

  9. [技术翻译]您应该知道的13个有用的JavaScript数组技巧

    本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...

  10. window.postMessage()实现(iframe嵌套页面)跨域消息传递

    window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...