微信小程序学习记录（一）

如何定义一个全局变量：

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表情

转载于:https://www.cnblogs.com/lsdk/p/8330217.html