微信小程序学习记录

Posted 2020-12-25 lsdk

如何定义一个全局变量：

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}