微信小程序开发教程之新手“出坑”系列
来源:互联网 发布:中国网络购物交易规模 编辑:程序博客网 时间:2024/05/16 19:03
这里不讲教程只讲如何避免入那些不必要或者容易出错而文档恰恰又没指明的坑。
一、导航栏
1、小程序在用app.json配置公共导航栏时,利用tabBar这个属性配置,这个对象是一个数组,只需配置即可,不需要添加节点。
注意点:
1.list属性只能配置2~5个,也就是说只支持2~5个导航按钮;
2. list属性值里的pagePath属性里,一定要有一个pages/index/index,不然导航栏出不来。我也不知道为什么。
2、在app.json里面的pages属性里面配置了的,称为应用内的页面;在tabBar的list属性里面配置了的是tabBar页面。
当你使用js绑定点击事件跳转页面时,如果你已经在使用导航时,跳转的那个页面不能够是tabBar页面。
3、小程序CSS里的 :focus 不生效,需要修改placehoder的样式,通过placeholder-class=”class”来定义。
.login .input-group input::-webkit-input-placeholder { color: #c0c0c0;}.login .input-group input:focus::-webkit-input-placeholder { color: transparent; } type="text" placeholder="邮箱" placeholder-style="color:#c0c0c0" /> password type="number" placeholder="密码" placeholder-class="placeholder" />
4、导入外部文件的几个关键字的区分:
import可以使用导入的目标文件中的template;
but, C import B, Bimport A,在C中可以使用B中的template,在B中可以使用A中的template,但是C中不能使用A中的temlate。作用域不会再次继承。
include可以将目标文件除了<template>
的整个代码引入,与import恰恰互补。
5、关于label跟input无法再统一水平线上显示:
代码:
<view class='newVositorInfoItem'> <label class='newVisitorLabel'>工作单位:</label> <input class='newVisitorInpt'placeholder='输入客人的姓名'></input> </view> <view class='newVositorInfoItem'> <label class='newVisitorLabel'>客人数:</label> <input class='newVisitorInpt' maxlength="1" type='number' placeholder='输入客人的姓名'></input> </view> <view class='newVositorInfoItem'> <label class='newVisitorLabel'>来访目的:</label> <input class='newVisitorInpt'placeholder='输入客人的姓名'></input> </view> <view class='newVositorInfoItem'> <label class='newVisitorLabel'>来访时间:</label> <input class='newVisitorInpt'placeholder='输入客人的姓名'></input> </view>
css:
.newVositorInfoItem{ margin: 3px 0px;}.newVisitorLabel{ display: inline-block; text-align: right; padding: 0px; width: 32%; height: 35px; line-height: 35px; border: 1px solid darkcyan;}.newVisitorInpt{ display: inline-block; width: 64%; height:35px; border: 1px solid seagreen;}
效果如图:
解决办法:
在css里面加一句代码:
.newVositorInfoItem{ margin: 3px 0px; **display:flex;**}.newVisitorLabel{ display: inline-block; text-align: right; padding: 0px; width: 32%; height: 35px; line-height: 35px; border: 1px solid darkcyan;}.newVisitorInpt{ display: inline-block; width: 64%; height:35px; border: 1px solid seagreen;}
效果如图:
都是开发过程中遇到的问题,就贴出来了,以后遇到再补。
给大家推荐一篇文章,写的很好。
有关微信小程序,那些官方文档没有告诉你的事情
未完待续…..
- 微信小程序开发教程之新手“出坑”系列
- 微信小程序开发之新手填坑
- 微信小程序开发教程系列-序言
- 微信小程序开发教程系列-序言
- 微信小程序新手教程之怎么实现下拉刷新
- java新手学习之开发教程
- 微信小程序教程系列
- 微信小程序教程系列
- 微信小程序教程系列
- 微信小程序开发教程之组件
- 微信小程序开发教程系列(1)--安装篇
- 程序天下:新手学ASP动态网页开发 教程/光盘
- 简单流程很有用 iPhone程序开发新手教程
- CSDN图片显示不出解决方法!(新手之坑)
- 【转载】微信小程序教程系列
- 微信小程序开发教程之组件开发以及wxss介绍
- 微信小程序开发教程
- 微信小程序开发教程!
- 黑盒测试
- C++ Virtual详解
- intellij IDEA 如何将MAVEN项目导成WAR包
- 生成字典序的全排列
- log4j的几个常用的logger名称(持续更新)
- 微信小程序开发教程之新手“出坑”系列
- 几种简单的排序算法
- jsp相关知识点梳理
- ArrayList的自动扩充机制
- MySQL事务隔离级别详解
- iOS使用WebViewJavascriptBridge实现OC与JS交互
- kibana 相关安装
- protostuff序列化工具的使用
- Android 获取文件/文件夹/转换文件的大小