微信小程序开发经验：风格、形象、固定位置

1.风格问题

我们主要讲的是微信小程序和之前的网页开发中元素不一致的问题。 ？不要掉落。后来发现原因是after伪元素（如果是浏览器的话，如果有伪元素的话，直接在开发者工具里可以看到，但是在widget里看不到。我想这仍然有点令人困惑）。

解决方案：

.btn::after{
  border:none;
}
复制代码

顺便列出一下微信小程序Put的默认样式：

button {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    color: #000000;
    background-color: #F8F8F8;
}
复制代码

默认行高、padding、margin这些功能还是需要注意的。

1.2 图像

小程序中图像的 image 元素具有 mode 属性，用于定义图像的裁剪和缩放模式，图像组件的默认宽度为 300x2p 和 5p 。也就是说，如果不设置mode属性，只设置宽度，图片肯定会发生变化，因为图片的高度现在是225px，不自适应。

提供两种解决方案：

1. 设置模式属性

// mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
// 我常用的模式是：
// widthFix 宽度不变，高度自动变化，保持原图宽高比不变
// 也就是说设置mode="widthFix"后只设置width属性，图片也可以自适应

// wxml
<image
    mode="widthFix"
    class="info--head"
    ></image>
// wxss
.info--head {
    width: 750rpx;
}
复制代码

1. 不设置模式属性。设置宽度和高度以定义图像的宽度和高度，而不会使图像扭曲太多。我认为它最适合轮播图片。还有目录页面等的缩略图。

1.3固定位置

设置位置：固定；元素不能位于滚动视图元素中。最好是在外层，不然ios系统会出现各种问题。

2。生命周期

2.1 进入主页 -> 进入子页面 -> 返回主页

生命周期为：主页 isLoad -> 主页面 isShow -> 主页面 isReady -> 子页面 isLoad - > 子页面正在显示 -> 子页面已就绪 -> 子页面正在卸载 -> 主页面正在显示。

可以看到，在这个过程中，子页面的onHide并没有启动。

2.2 在标签页之间切换

上一个标签页是隐藏 -> 当前标签页显示。

您可以看到，在步骤 1 和 2 中，选项卡页不会触发 onUnload 事件。

2.3 on隐藏启动时间

当页面隐藏/切换到后台时启动。例如navigateTo或subtab切换到其他页面、2♽❙等onUnload启动时间》 页面卸载时启动。就像重定向或导航返回到其他页面。

2.5 selectImage

这是我遇到的一只大蜻蜓。当调用wx.chooseImage API时，实际上会触发页面onHide和onShow。事件，也许是因为我对 切换到后台时触发的 onHide 事件了解不够？ ？ ？我之前做的项目是和即时通讯相关的。我问为什么选择图片后聊天记录乱了。当时确实花费了我很多时间。这真是胡萝卜加大棒。

2.6 遇到的问题

主要是想在离开页面时清空定时器，但由于对onHide和onUnload的启动时序理解不够深入，所以还专门开了生命周期调试的debug功能。现在我大概明白了。

还有一件事，非常重要。如果webview有定时器，退出widget页面时必须将webview的src属性设置为null，否则webview不会出现被销毁的情况。 ？无论如何，我的计时器仍然存在，因此将 src 设置为 null 可能会解决问题。 ？ : 工具 --> 构建 npm;

一旦你做到了，那就好了。

什么？？？我做错什么了吗？总共只有4步，我这里会出错吗？检查后发现少了一个很重要的步骤：package.json文件。是的，这个文件在项目中是最需要的。为什么我进入微信小程序就忘记了？我感觉我还是读书太少了。

解决方案：

1. 首先使用npm init在项目根目录下新建一个package.json文件。
2. 以后就只有官方文档了，我就不写了。

4。新的API

上一次写小程序已经是一年前的事了，所以我想新的API大家都很熟悉了，所以我不想轻易批评它。 ？将网页图片地址替换为本地图片地址