全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[河池seo公司优选久澳]小程序开发经验的总结

  一、WXML

  


 

  1.1=△▲:wx:if与wx:else

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

  

<=◁☆;view wx•▷•○:if="{{true}}">
	<◁▷◇;text>这是信息列表</text>
<▼=;/view>
<view wx:else>◆○;
	<text>☆●□○;找不到信息<◇★★-;/text>
</view>

 

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

  

data:{
 info★▽◆:null
}
<view wx…◁:if="◇•△…;{{info === 1}}">
	<text>•◆•◁;这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
<▲•=;/view>

 

  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方式•=。27 2020.10 [兰州国内seo公司]微信小程序中组件通讯的介绍(代码示例) 本篇文章给大家带来的内容是关于微信小程序中组件通讯的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 这篇主要讲组件通讯 (1)父组件,如果涉及到css,需要在wxss里@import引入。

  

/**
* 方式一:直接使用
* 1. 给template 设置name属性
* 2▲…☆•. 组件传过来的值可以直接使用 hidden="{{□◁●•!isloading}}"
*/
<template name="◆…;loading"□▼◇☆;>△◆;
 <view class="◇☆▪;weui-loadmore"-…•; hidden="{{!isloading}}">■○;
 <view class="weui-loading"></view>
 <view class="weui-loadmore__tips">-…◆▲;正在加载</view>△▽;
 </view> 
</template>◆◇;
/** 
* 方式二:按路役引入 
* 1. is 等同方式一的name
* 2▲○. data="▼=;{{isloading}}"◇◆●□; 给template的数据
*/
<import src="◇▲;../template/loading.wxml"=▪□▲;/>▪□■▽;
<template is="loading"▼▷•▲; data="{{isloading}}"-▲•★;></template>

1.5:脚本语言wxs

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

  

<○▼★;wxs module="wxs" src="../../utils/wxs.wxs"=◇▷△;></wxs>
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绘图,比如二维码☆▪-、分享图片等。

      

 

  三、[河池seo公司优选久澳]JavaScript

  


 

  3.1☆◁△▪:二次封装wx.request方法

  3▽▼.2:页面的生命周期

  

  •  

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

      

  •  

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

      

  •  

      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:二维码生成器

      

 

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

  以上就是小程序开发经验的总结的详细内容,更多请关注久澳传媒编程栏目其它相关文章▽•!

[河池seo公司优选久澳]小程序开发经验的总结

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。