微信小程序开发---散碎知识学习

   

pages

----index

--------index.js

--------index.wxml

--------index.wxss

utils  存放公共文件

app.js   入口文件

app.json   配置文件( pages 可配置启动页)

app.wxss  全局样式

project.config.json  项目配置文件，同详情->本地设置 进行可视化修改

sitemap.json :

js负责逻辑  .json负责配置项   .wxss 代表css，样式文件    wxml:代表html

pages文件夹下为页面

.wxml:小程序无<div> 即为 <view>

新建页面：app.json  文件内 pages中直接添加创建文件路径，编译即可自动生成。

属性值为true/false时 ，默认为false 需要设置true时直接在标签内添加属性名即可 无需=“true”

 

 flex: 0 0 100px;  flex-grow:放大比例，0不放大 ；flex-shrink:缩小比例，0不压缩 ；flex-basis:尺寸 ;

text：

selectable  长按是否可选中复制

space：控制添加的空格字符大小

decode：解析转码

swiper:

注意通过Wxml查看布局时 发现swiper有一个默认高度150rpx，注意根据自己的需要设置高度

 

image: 

单双标签都可以：<image src="/images/2.GIF"></image>  <image src="/images/3.jpg"/>

../  ：退出当前目录   

./ ：当前目录   

/：根目录

因为image组件时行元素  所有会出现有留白的情况，解决方法

 1）display: flex;2）display:block

mode常用：widthFix/heightFIx： 宽/高不变，高/宽自动变化，可去除默认尺寸中的留白   

                    aspectFit：使长边显示 

                    aspectFill：显示短边，长边才截取

show-menu-by-longpress ：长按弹框

超链接navigation：块元素，

默认时跳转到应用内页面，不能跳到tabbar页面（open-type="switchTab"可以）。

 url：添加跳转地址，路径中无需添加后缀  "/pages/logs/logs"（无法访问外网，只能内部跳转）

open-type="redirect" ：无返回，用于新窗口打开，但不能使用跳转带tab

input:

auto-focus 焦点 只能真机调试

cursor-spacing="10rpx"  距离软键盘，只能真机调试

条件判断：

wx:if    wx:elif   wx:else

wx:for  中需要添加wx:key="*this" ，如果对象 可自定义key名

 

事件：通过bindtap绑定自定义事件，通过data- 传递参数 （注意传参时格式）在定义事件 中打印  ，传递的参数存于currentTarget：下dataset中

获取传递的参数并赋值于data中， 需要使用：this.setData({   })

 

API

1、路由：

wx.getSystemInfoSync().model ：获取设备型号

界面-交互：

跳转非tabbar：navigation  navigateTo

跳转tabbar：switchTab  和 reLaunch（可携带参数 ?key=xxx ）

返回上一页：navigateBack

2、网络

测试api：https://www.showdoc.com.cn/634862539039115?page_id=3764402597421901

测试打印网络请求结果异常：

 当字符串为空判断时：<view wx:if="{{item.picurl==0}}">

不明用法的常用布局属性：

display: flex

justify-content: space-between;

align-items: center;  居中：注意高度或者宽度

box-sizing: border-box;

opacity: 0;透明

position: relative;

定义动画：https://blog.csdn.net/u013818205/article/details/86555664

@keyframes aa{ 0%{}  50%{}  100%{}}    animation:aa 1s infinite alternate;

 

 

布局知识点：

行内元素和块级元素的区别：https://m.html.cn/qa/html5/13517.html

display: inline-block;

white-space: nowrap;

 

display:flex：弹性布局 https://www.runoob.com/w3cnote/flex-grammar.html

justify-content: space-between;

position: https://www.runoob.com/css/css-positioning.html;

flex-direction: column;

justify-content: center;

align-items:center;

text-align:center;

justify-content: center;

box-sizing: border-box;

line-height: 1.8em;