微信小程序采坑(一)
1、微信小程序如何让text内容空格
<text decode="{{true}}" space="{{true}}"> </text>
在text标签中一定得加上decode="{{true}}",然后在需要显示空格的地方放 想空几个空格就放几个
2、微信小程序路由跳转指定页面
微信小程序路由跳转,共有三种形式:页面中使用navigator组件做页面链接形式路由跳转,js中可以使用wx.navigateTo--保留当前页面,跳转到应用内的某个页面,wx.redirectTo--关闭当前页面,跳转到应用内的某个页面 wx.navigateBack()--关闭当前页面,回退前一页面。
navigator组件做页面链接
页面链接。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| url | String | 应用内的跳转链接 | |
| redirect | Boolean | false | 是否关闭当前页面 |
| hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class="none"时,没有点击态效果 |
注:navigator-hover默认为{ opacity: 0.7;}, <navigator/>的子节点背景色应为透明色
示例代码:
/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
color:red;
}
<!-- sample.wxml -->
<view class="btn-area">
<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开(关闭了当前页面)</navigator>
</view>
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
// redirect.js navigator.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
OBJECT参数说明:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内页面的路径 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
wx.navigateTo({
url: 'test?id=1'
})
注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
OBJECT参数说明:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内页面的路径 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
wx.redirectTo({
url: 'test?id=1'
})
wx.navigateBack()
关闭当前页面,回退前一页面。
3、BarTab没有显示
1,书写,正确书写时tabBar,不要写成tabbar,地球人都知道
2,当创建新工程时,app.json中Pages配置是这样的 ,,【图1】,
注意:微信小程序里面的json文件时不能注释的,图中只是给读者看一下该放在哪里而已,,,,不能注释!!!
3,在一些json文件中,如果是你没有写上的,就必须加上 {} 花括号。
4,在BarTab中的List属性,里面的index首页配置,一定要放置在第一项,第一项,重要。【图2】
微信小程序采坑(一)的更多相关文章
- 使用wepy框架搭建微信小程序采坑记(一)
1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...
- 微信小程序采坑
wx.request() complete回调函数执行时机问题 代码执行顺序有时候会严重影响用户体验:比如项目中请求数据时显示loading的图标,请求完成后不管失败还是成功都要把loading图标隐 ...
- 微信小程序采坑之上拉触底加载更多和下拉刷新
小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...
- 微信小程序采坑之scroll-view
当设置了scroll-y为true之后,纵向是没有问题的,会出现滚动条. Android上一切都是那么的祥和, ios上你会发现如果你scroll-view里面的东西超过横向的宽度时,就会隐藏了. 也 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- 微信小程序爬坑日记
新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 微信小程序遇坑笔记
最近做了一个简单的微信小程序,遇到了一些坑: 1.appid固定,但是appsecret是可以变的,而且没有地方查看,后台以查看就是变更了,所以这个地方在开发的时候需要保存好: 2.打开网页,这个网页 ...
随机推荐
- Oracle优化学习
SQL执行效率对系统使用有很大影响,本文总结平时排查问题中遇到的一些Oracle优化问题的解决方案,或者日常学习所得. 1. Oracle sql执行顺序 sql语法的分析是从右到左. 1.1 SQL ...
- idea上使用maven模块开发
使用maven模块开发: 使用Maven构建多模块项目 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为common(域模型层).dao(数据库访问层).s ...
- 混合app开发--js和webview之间的交互总结
使用场景:原生APP内嵌套H5页面,app使用的是webview框架进行嵌套 这样就存在两种情况 1.原生app调用H5的方法 2.H5调用app的方法 分别讲解下,其实app与H5之间的交互式非常简 ...
- ava.io.InputStream & java.io.FileInputStream
java.io.InputStream & java.io.FileInputStream java.io.InputStream,这个抽象类是表示字节输入流的超类,这个抽象类的共性的方法有: ...
- 1.关于Java
一.Java简介 1.java语言的特性 java语言的重要特性:跨平台: 一次编译,到处运行. 2.java的环境搭建: 1.JRE: java运行环境. JRE = java 虚拟机 + 核心类库 ...
- 阻塞式I/O实现简单TCP通信
一.技术简介 (1)服务端打开两个端口9999和6666监听外来连接: (2)服务端的子进程通过端口9999监听外来消息,通过端口6666发送消息: (3)客户端的子进程处理外来消息,父进程发送消息 ...
- 新萌渗透测试入门DVWA 教程1:环境搭建
首先欢迎新萌入坑.哈哈.你可能抱着好奇心或者疑问.DVWA 是个啥? DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演 ...
- Docker(五)如何构建Dockerfile
摘自 https://mp.weixin.qq.com/s/_hq9dPe6390htN8BTkoQeQ 一.Dockerfile的指令集 由于Dockerfile中所有的命令都是以下格式:INSTR ...
- c# 读取excels
DataTable ExcelTable; DataSet ds = new DataSet(); //Excel 文件一般都保存为统一的xls的连接 其 ...
- Docker 更改默认存储目录 - 十一
Cemtos 7 Docker 默认目录是 /var/lib/docker docker info 查看 docker 配置信息 更改 docker 默认目录 : 编辑 启动文件: 编辑 /usr/ ...