【小程序】小程序学习遇到的问题汇总(一)

之前在学习小程序的过程中碰见了不少问题,在这里汇总记录一下,本篇为第一篇。

1.小程序中切换tab传值/通信问题

这是切换tab遇见的问题,应用情景:每次点击某一tab时传入设定值。

由于小程序每一个页面都是独立的个体,那么需要通过一个全局的东西来保存值。小程序提供了唯一的一个全局的应用实例,可以通过getApp()来获取。这样只要把变量保存到实例中,在另一个页面去获取就可以了。
// 页面一 page1.js
var app = getApp();

Page({
    data: {
        num: 1,
        ...
    },
    change: function () {// 某绑定事件
        this.setData({num: this.data.num + 1});
        app.num = this.data.num;
    },
    onLoad: function () {
        app.num = this.data.num;
    }
})

// 页面二 page2.js
var app = getApp();

Page({
    data: {
        xxx: xxx
        ...
    },
    onShow: function () {
        console.log(app.num);// 打印保存早全局变量中的值
    }
})

2.小程序中点击时传值

在绑定事件的标签上添加一个data-xx属性,接着在事件中获取。
// page.wxml
...
<view data-num="1" bindtap="click"></view>

// page.js
Page({
    data: {
        xxx: xxx
        ...
    },
    click: function (e) {
        console.log(e.currentTarget.dataset.num);// 打印传来的值
    }
})

3.小程序中点击时为点击的对象添加选中样式

// page.wxml
...
<view class="item-style {{showIndex === item ? 'active' : ''}}"
    wx:for="{{data}}"
    wx:key="index"
    data-index="{{item}}"
    bindtap="click"
>
    {{item}}
</view>

// page.js
Page({
    data: {
        data: [1, 2, 3, 4],
        showIndex: '',
        ...
    },
    click: function (e) {
        this.setData({showIndex: e.currentTarget.dataset.index});
    }
})

// page.wxss
...
.item-style.active {
  background-color: #F5F5F5;
}

4.小程序配置tabBar

配置tabBar的选中样式要在外一层,之前不知道,以为每一个都可以配。。。
// app.json
...
"tabBar": {
    "color": "#000",// 默认样式
    "selectedColor": "#3C5F81",// 选中样式
    "borderStyle": "white",// "white" or "black" 有无分隔线
    "list": [
      {
        "pagePath": "pages/page1/page1",
        "iconPath": "images/tab/page1.png",
        "selectedIconPath": "images/tab/page1-s.png",
        "text": "页一"
      },
      {
        "pagePath": "pages/page2/page2",
        "iconPath": "images/tab/page2.png",
        "selectedIconPath": "images/tab/page2-s.png",
        "text": "页二"
      }
    ]
  }
  ...

一个可以查询天气的小程序源码

Image placeholder
lp763659470
未设置
  49人点赞

没有讨论,发表一下自己的看法吧

推荐文章
学习 nodejs+mongodb+koa2 写接口(一) 环境布置

一.环境准备最近在学用Nodejs写后端接口,了解到koa2是Nodejs的一个框架。可以快速开发后端接口,同时也能更快熟悉Nodejs以下是所需的环境node  v7.6+,可以用nvm或者n安装指

ThinkPHP6 核心分析(一):Http 类的实例化

从入口文件出发 当访问一个ThinkPHP搭建的站点,框架最先是从入口文件开始的,然后才是应用初始化、路由解析、控制器调用和响应输出等操作。入口文件主要代码如下: //引入自动加载器,实现类的自动加载

通过 Laravel 创建一个 Vue 单页面应用(一)

使用laravel创建一个Vue单页面应用(SPA)可以构建一个整洁的由API驱动的应用。在此教程中,我们将学习如何构建并运行一个以Vue路由为前端,laravel为后端的SPA应用。首先我们将注意

【Golang+MySQL】记一次 MySQL 数据库迁移(一)

【Golang+mysql】记一次mysql数据库迁移(一)文章地址:https://github.com/stayfoo/stayfoo-hub一、准备目标: 腾讯云CVM自建mysql数据迁移到腾

同一字段多个查询条件时遇到的一个问题

需求,加载礼物表中,租户id=0和租户id=10的数据,并排除id=10,11,12第一次写法(这个写法是错误的)$whereOr=[ ['tenant_id','=',0], ['gift_id',

Redis 命令练习汇总

一、Redis连接与认证 连接参数:ip、端口、连接超时时间,连接成功返回true,否则返回false $ret=$redis->connect('127.0.0.1',6379,30); 密码认

数据库分库分表解决方案汇总

一.数据切分关系型数据库本身比较容易成为系统瓶颈,单机存储容量、连接数、处理能力都有限。当单表的数据量达到1000W或100G以后,由于查询维度较多,即使添加从库、优化索引,做很多操作时性能仍下降严重

在 Ubuntu 18.04 上 搭建微信小程序和公众号应用开发环境

在Ubuntu18.04上搭建微信小程序和公众号应用的开发环境安装NVM如果在Ubuntu上使用apt-get安装了Node.js,需要先手动移除:$sudoapt-getpurgenodejs&&s

百度投资知乎,智能小程序是合作中枢

在最近,知乎完成了由百度和快手联合投资的最新一轮融资。这已经是知乎的F轮融资,额度达到了4.5亿美元,是知乎迄今为止金额最大的一轮融资。有趣的是,在这次投资后知乎问答内容将以智能小程序的形式接入百度A

小程序怎么用js修改css?

小程序怎么用js修改css?微信小程序和普通的前端开发有很多不同。前端开发中修改样式,js可以操作DOM,即document.getElementById(id).style.property=new

【PHP学习】PHP入门学习 之 常量

PHP常量是一个简单值的标识符(名字)。如同其名称所暗示的,在脚本执行期间该值不能改变(除了所谓的魔术常量,它们其实不是常量)。PHP常量默认为大小写敏感。传统上常量标识符总是大写的。 PHP常量名

同义词搜索是如何做到的?

前面几个章节我们使用到了Lucene的中文分词器HanLPAnalyzer,它并不是Lucene自带的中文分词器。Lucene确实自带了一些中文分词器,但是效果比较弱,在生产实践中多用第三方中文分词器

5位女性程序员的自白:计算机不撒谎;女程序员的代码一样也很棒

谁说这个领域就是男性的天下偏见本身就是一种带标签的想法她们的世界里只信奉“computer never lies”她们认为代码漂亮比发型漂亮更重要她们到底是谁?谷悦是喜欢简单、纯粹工作的气质女神,八年

有个关于『热更新』的问题请教

热更新问题问题背景日志分析支撑平台 游戏服务器将日志推送到平台服务器 protobuf作为序列化方案,双方约定好proto文件,一方进行序列化发送,另一方反序列化接收 问题描述当proto变更之后,平

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

【译】前端开发不是一个亟待解决的问题

原文地址:Front-enddevelopmentisnotaproblemtobesolved原文作者:RobinRendle本文永久链接:https://segmentfault.com/a/11

mysql 进行update时,要更新的字段中有单引号或者双引号导致不能批量生成sql的问题

前言将数据从一张表迁移到另外一张表的过程中,通过mysql的concat方法批量生成sql时遇到了一个问题,即进行UPDATE更新操作时如果原表中的字段中包含单引号'或者双引号",那么就会生成不正确的

学习一门新编程语言的 6 步

有些人学习编程刚开始头脑发热,买了很多书,下载很多视频,收藏上百G的资料,没过几天,热情就褪去了,最后完成了从入门到放弃的全过程,究其原因主要是缺乏清晰的目标,没有方向,或者方向不明确。那么,我们应

【Java 反射学习】Java 反射基础

知识点 类是用来描述对象的,而反射就可以理解为是用来描述类的。 类中的属性包括: Class类本身 Package类所在的包 Field类中的属性 Method类中的方法 Constructor类中的

Python 教程-机器学习

Python有着海量的可用于数据分析、统计以及机器学习的库,这使得Python成为很多数据科学家所选择的语言。 下面我们列出了一些被广泛使用的机器学习及其他数据科学应用的Python包。

学习猿地开启IT在线课的精品模式

程序员的工作已经连续十年被国家评为“性价比”最高的职业,而这种技术岗位是需要有一定的技术功底才能从事的工作,需要长时间的、有目的学习积累,并且需要不断磨练,才可以胜任的工作。现在企业招聘程序员的要求越

学习猿地开创IT教育2.0模式

传统的学习方式都是进入班级,跟着老师面对面的学习。需要有几个硬性条件,就是在固定场地,并且在固定的时间里,按照老师安排的进度学习。基础不一样进度没办法调整、学习不好的跟不上会一直学习不好、有事旷课课程

学习猿地又签约一名大牛讲师

学习猿地根据IT方向的线上学习特点,研发人机互动教学系统,打造领先的学习模式。平台签约了十名大牛联合创办,每个合伙人再召集几名身边的技术大咖,根据程序员的岗位需求研发精品课程,并将一门学科中所需要的全

Git 学习以及创建第一个应用

常用命令gitconfig--globaluser.name"YourName"//设置全局用户名gitconfig--globaluser.emailyour@example.com//设置全局邮箱

Go 切片 slice - Go 学习记录

Go切片slice slice切片类型基本概念 slice总是指向一个底层的array,slice的声明也可以像array一样,只是不需要定义长度 slice并不是真正意义上的动态数组,而是一个引用