0

0

小程序开发经验的总结

hzc

hzc

发布时间:2020-06-15 10:20:50

|

3612人浏览过

|

来源于掘金社区

转载

一、wxml


1.1:wx:if与wx:else

前端通过后端的接口获取信息列表,如果有数据则展示数据内容,否则则显示找不到信息。 如果if-else使用布尔值的状态作这个开关的话,页面会先出现false的状态,再更新为true,即闪现找不到信息的内容,这种交互不是很理想。


	这是信息列表


	找不到信息

最好的做法是使用下面这种,一开始设置info为null,

data:{
    info:null
}

	这是信息列表


	找不到信息

1.2:wx:for

for循环要添加wx:for-item="item" wx:key="item"

1.3:block标签

wx:if、wx:for、wx:else这些没有样式意义的语法尽量使用block

1.4:template组件模板

公共的页面模块/组件,可直接在wxml使用,也可以使用import方式。如果涉及到css,需要在wxss里@import引入。

/**
* 方式一:直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/


/** 
* 方式二:按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/

1.5:脚本语言wxs

专门运行于wxml页面的脚本语言,与javascript不同,不支持使用ES6语法,也不能引用js。

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

二、WXSS


2.1:背景Icon

小程序的 background 里只能使用完整的https图片路径,项目中使用icon的方式:

  • 矢量图svg:具备完美的可伸缩性,容易进行调整(颜色、大小等);

  • data-uri:图片体积小于20Kb使用base64方式。[前端图片最优化的引入方式分析][segmentfault.com/a/119000001…]

  • 较大文件:直接在wxml使用image标签

  • 引入外部icon:如阿里巴巴矢量图库,可使用网络路径和下载到本地的方式来使用。

2.2:重置样式

2.3:font-family标准规范

font-family: 
/*西文:*/
-apple-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 是一个相当于屏幕宽度百分比的相对单位,以下情况不建议使用:

  • font-size和border-width;animation动画中涉及translate位移:部分机器在rpx转成px出现小数时,如262.89px,微信会向下取值为262px,产生1px的差距。

  • canvas绘图,比如二维码、分享图片等。

三、JavaScript


3.1:二次封装wx.request方法

3.2:页面的生命周期

  • onLoad: 页面加载,一个页面只会调用一次。能获得到页面参数options。

  • onShow: 页面显示,每次打开页面都会调用一次,从后台切换前台也会调用一次:手机从熄屏切回显屏、从最小化回到最大化。

    去日租网站系统
    去日租网站系统

    去日租程序是一款具有强大的功能的基于.NET+SQL2000+AJAX构架的房屋出租管理系统。 日租网站管理系统,采用ASP.NET2.0语言开发,它集成租房模块、文章模块、订单模块、邮箱短信模块、用户模板、SEO优化模块、房间模块、支付模块等多项强大功能。系统有多年经验的高级工程师采用三层架构开发,页面代码全部采用DIV+CSS,完全符合SEO标准,有利于搜索引擎关键排名优化。日租网站

    下载
  • onReady: 页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

  • onHide: 页面切换到后台、navigateTo 、 tab 切换时调用。

  • onUnload: 页面卸载。当页面被关闭或内存不足主动销毁页面。

3.3: new Date兼容性

安卓能识别new Date("2018-05-30 00:00:00")格式,但在IOS只能识别2018/05/30 00:00:00格式。需要将短横替换为斜杠。var iosDate= date.replace(/-/g, '/')。

3.4:冒泡事件

  • bindtap :事件绑定不会阻止冒泡事件向上冒泡

  • catchtap:事件绑定可以阻止冒泡事件向上冒泡

四、小程序功能


4.1:canvas生成图片

4.2:插件的使用

4.3:页面栈限制

小程序的页面栈最新版本限制为10个,超过10个之后无法进入下一个页面。

故要慎用页面数量,导航API要灵活结合wx.navigateTo、wx.redirectTo、wx.navigateBack

4.4:提示弹窗Dialog

  • 代码前面使用wx.hideLoading会导致后面的wx.showToast出不来。因为wx.showToast具备隐藏wx.showLoading()提示框的功能。

五、其它


5.1:主流框架

  • mpvue:使用vue语法规范编译成小程序和h5语法

  • Taro:基于react可同时编译成小程序、h5、react-native等。

5.2:常用插件

  • wxParse:富文本解析

  • wx-charts:图表工具

  • wxapp-qrcode:二维码生成器

推荐教程:《微信小程序

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

196

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

224

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

239

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

580

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

794

2023.08.22

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1259

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

275

2025.10.17

java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

7

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.9万人学习

Excel 教程
Excel 教程

共162课时 | 15.5万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号