小程序开发经验总结（微信小程序开发项目概述）

1.wxml

1.1：wx:if和wx:else

前端通过后端接口获取信息列表。 如果有数据，则显示数据内容；如果没有数据，则显示搜索。 无可用信息。 如果 if-else 使用布尔状态进行此切换，则页面将首先出现 false 状态，然后更新为 true。 也就是说，它会闪烁未找到的信息。 这种交互并不理想。

这是信息列表未找到信息 >>

最好的办法是使用下面的方法，一开始就把info设置为null。

data:{ info:null}这是信息列表未找到信息

1.2: wx:for

For 循环，wx :for[ k3]item="item" wx:key="item"

1.3：块标签

wx:if、wx:for、wx:else表示样式没有。 尝试使用块。

1.4：模板组件 模板

公共页面模块/组件可以直接在wxml中使用或导入。 如果涉及CSS，必须通过wxss中的@import引入。

/*** 方法一：直接使用* 1.在模板上设置name属性* 2。 组件传递的值可以直接使用hidden="{{!isloading}}"*/ 正在加载 /** * 方法2 ：通过路径导入* 1. 相当于方法1的名称* 2. data="{{isloading}}" 模板数据*/

1.5：脚本语言wxs

专门运行在以下环境： wxml页面脚本语言与JavaScript不同，不支持使用ES6语法，也不能引用JS。

module.exports = {//输出百分比格式Progress: funAction (c,m) {return c/m*100}}

2.WXSS

2.1：背景图标

小程序后台只能使用完整https。马苏。 图片路径，如何在项目中使用图标：

矢量图片svg：完美的扩展性，易于调整（颜色、大小等）；

data-uri :如果图像大小小于20Kb，请使用base64。 【前端图片部署最佳方式解析】[segmentfault.com/a/119000001…]

大文件：在wxml中直接使用图片标签

外部图标介绍：阿里巴巴矢量库等可以通过网络路径下载到本地使用。

2.2：重置样式

2.3：font-family标准规范

font-family: /*Western:*/-apple[ k3 ] system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,/*中文:*/PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif ;

2.4：合理使用rpx单位

rpx是一个相对单位，相当于屏幕宽度的百分比。 我们建议您不要在以下情况下使用它：

字体-大小和边框-宽度。 动画 动画包括变换位移。 如果你将rpx转换为px，看到小数如262.89px，微信会将这个值缩小到262px，从而产生1px的差距。

二维码、共享图像等画布绘制。

3.JavaScript

3.1：wx.request方法的二次封装

3.2：页面生命周期

onLoad：加载页面。 该页面仅被调用一次。 您可以获得页面参数选项。

onShow：页面显示。 每次打开页面时调用一次，从后台切换到前台时调用一次。 电话从关闭屏幕切换到显示屏幕。 从最小化到最大化。

onReady：页面的初始渲染已完成。 一个页面仅调用一次。 这意味着页面已准备就绪，您可以与视图层进行交互。

onHide：页面切换到后台、navigateTo、或者tabs切换时调用。

onUnload：卸载页面。 当页面关闭或内存不足时，会立即销毁页面。

3.3：新的日期兼容性

Android可以识别新的日期格式（“2018-05-30 00:00:00”），但仅被IOS识别。 2018/05/30 00:00:00 格式。 破折号必须替换为斜杠。 var iosDate= date.replace(/-/g, '/').

3.4：冒泡事件

bindtap：事件绑定无法阻止冒泡事件向上冒泡

catchtap：事件绑定无法阻止冒泡事件向上冒泡

catchtap：事件绑定无法阻止冒泡事件向上冒泡

catchtap：事件绑定无法阻止冒泡事件向上冒泡。 p >

4.小程序功能

4.1：Canvas生成图片

4.2：使用插件

4.3：页面堆栈限制

最新小程序的页面堆栈版本仅限于10版本。 如果超过10个，将无法进入下一页。

所以要注意页面数量，导航API要灵活与wx.navigateTo、wx.redirectTo、wx.navigateBack结合。

4.4：提示弹出对话框

代码之前的 wx.hideLoading 将会隐藏稍后的 wx.showToast。 因为wx.showToast 具有隐藏 wx.showLoading() 提示框的功能。

5.其他

5.1：主流框架

mpvue：使用vue语法规范编译小程序和h5语法

Taro ：基于React的可编译，可以同时转换为小程序、h5、react-native等。

5.2：常用插件

wxParse：富文本分析

wx-charts：图表工具

wxapp[ k3] qrcode ：二维码生成器

推荐教程：《微信小程序》

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP？ PHP应该去哪里学习？如何快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：小程序开发经验总结（微信小程序开发项目概述） https://zhujicankao.com/123938.html