如何定义一个全局变量:

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. vue打包静态资源后显示空白及static文件路径报错

    1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...

  2. laravel框架视图中常用的逻辑结构forlese,foreach,ifelse等

    if 和else @if($name === 1) 这个数字是1 @else 这个数字非1 @endif switch @switch($name) @case(1) 变量name == 1 @bre ...

  3. Linux下实现web服务器

    说明:暂时只是实现了静态网页的响应 #include <stdio.h> #include <sys/types.h> /* See NOTES */ #include < ...

  4. MySQL8.0新特性总览

    1.消除了buffer pool mutex (Percona的贡献) 2.数据字典全部采用InnoDB引擎存储,支持DDL原子性.crash safe.metadata管理更完善(可以利用ibd2s ...

  5. hadoop入门-centos7.2安装hadoop2.8

    1. 安装准备 (1)必须安装jdk: 因为hadoop是基于Java实现的,所有必须安装jdk 是JDK不是jre jdk1.7 jdk1.8 (2)系统位数 (3)创建专用用户 useradd h ...

  6. jquery sortable的拖动方法示例详解

    转自:https://hb-keepmoving.iteye.com/blog/1154618 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   u ...

  7. iOS CGContextRef/UIBezierPath(绘图)

    绘图的底层实现方法 注意:在drawRect方法中系统会默认创建一个上下文(C语言类型)在其他方法中不会有这样一个上下文(可以自己测试) @implementation DrawView //注意,在 ...

  8. python使用Pyinstaller打包

    一.前言 python文件打包,将.py文件转化成.exe文件(windows平台),可以使用Pyinstaller来打包 Pyinstaller可以在全平台下使用,但是请注意打包生成的文件不能在全平 ...

  9. Intellij里检出svn报错找不到svn解决办法

    Intellij里检出svn报错找不到,解决办法: 1. 安装svn客户端: 2. 去掉settings->version control->subversion里的use command ...

  10. Vue框架之组件与过滤器的使用

    一.组件的使用 局部组件的使用 ​ 打油诗: 1.声子 2.挂子 3.用 var App = { tempalte:` <div class='app'></div>` }; ...