微信小程序学习记录(一)

如何定义一个全局变量:

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}

原文地址:https://www.cnblogs.com/lsdk/p/8330217.html

时间: 2024-10-10 16:41:08

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

微信小程序学习Course 9 云开发功能

微信小程序学习Course 9 云开发功能 微信小程序提供了一套免费的云开发功能API函数,虽然容量小,但足够我们个人用户使用以及学习了.下面简单介绍一下. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能

微信小程序bug记录与解决

微信小程序bug记录 textarea textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工具上的,第二张图是在IOS真机上的.从上图可以看出来,在开发工具上显示很正常,而且没有padding,可是在真机上左上角就出现了padding,并且无论你在外部对textarea的padding做任何处理,都无法覆盖. 目前有一种解决方式是根据ios和android的不同平台来给teaxarea设置

微信小程序学习Course 2 事件

微信小程序学习Course 2 事件 事件是用来打通逻辑层与视图层的枢纽,我们一般在视图层(WXML文件)对某个控件绑定事件函数,在逻辑层(JS文件)编写事件函数代码. 2.1 事件类型 小程序中有两类事件 1.冒泡事件:当一个组件的事件被触发时,该事件会向父节点传递数据. 2.非冒泡事件:当一个组件上的事件被触发时,该事件不会向父节点传输数据. 2.2 事件绑定 事件的绑定比较简单,在视图层中增加类似如下代码,事件通常有两种开头,一种时bind以他开头代表普通模式:另一种是catch开头,他会

微信小程序学习Course 7 定时器功能

微信小程序学习Course 7 定时器功能 微信小程序中有一个定时器API函数,其提供了四个API接口 7.1.number setTimeout(function callback, number delay, any rest) 设定一个定时器,在定时到期以后执行注册的回调函数,值得注意的是本函数只执行一次!!!! setTimeout(this.DaoJiShi, 1000);//时间到达一秒执行一次DaoJiShi函数 如果我们想实现一个不停调用的函数,怎末实现呢?以下函数利用递归实现了

微信小程序学习Course 4-2 JS数组对象学习

微信小程序学习Course 3-2 JS数组对象学习 本节主要介绍JS中的数组. 3-2.1 数组的声明 数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = [];//创建一个空数组 var names = ["sadad","asdsad"];//创建一个包含两个字符串的数组 var names = new Array(3);//创建一个包含三个元素的数组 3-2.2 数组的增添 数组有多种增添方式,一种是栈方式,另一种

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序开发 记录

采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因,最后提供正确的实例.  错误现象是,项目的app.json使用以下代码,却没有如期望那样在屏幕底部出现TabBar. { "pages":[ "pages/clickDemo/clickDemo", "pages/logs/logs", "

微信小程序来了,整理微信小程序学习教程网站

第一,首先菜鸟教程  网址:http://www.runoob.com/ ps: 菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML.CSS.Javascript.Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML.CSS.Javascript.Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识. 同时本站

微信小程序学习

以下内容均转自微信平台,为学习所用. 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 注意:如果要以非管理