微信小程序页面开发注意事项整理


Posted in Javascript onMay 18, 2017

小程序的开发注意事项:

1、js文件

每个页面对应的js文件可以定义页面onReady,onLoad,onShow,onHide,onUnload,还有页面的数据,自定义的函数要写到一块,内部约定是都写到默认函数的后面。既“页面中先data,再默认函数,再自定义函数”方便review code,提高协作效率。

2、json文件

默认不能为空,即使没有内容也要为空数据{},原先定义在app.json中的内容,如果需要在当前页面中重新定义,那么只要把内容复制过来,直接赋新值即可,用于设置小程序的状态栏、导航条、标题、窗口背景色。常用的是页面的标题

{
 "navigationBarTitleText": "我的",
 "selfdata":"全栈工程师师不靠谱更新",
 "tabBar": {
  "list": [{
  "pagePath": "pagePath",
  "text": "text",
  "iconPath": "iconPath",
  "selectedIconPath": "selectedIconPath"
  }],
  "position":"top"
 }
}

见惯了菜单在底部的,来一个在top吧。

3、wxml文件

页面头部和底部需要封装好,做成模版,分别导入入页面

<import src="/pages/common/head.wxml"/>
<import src="/pages/common/foot.wxml"/>

之前HTML编写的好习惯还是要带入进来有head还有foot,当然业务内容就body,每一块就用一个view包装起来,方便控制布局和class

页面加载的时候获取数据,从网络或从缓存中,数据再通过页面的data中定义的内容在页面渲染。具体的呈现列表、条件这些多多的使用。

4、wxss文件

@import "common.wxss";

公共样式、reset样式要根据不同项目提前管理好,不要使用px,不要使用px,不要使用px,重要的事情要说三遍,小程序为了保证兼容和自适应使用了新的单位rpx

5、要提供一个供用户清理本地缓存的按钮。相当于项目的reset开关,缓存数据、文件数据、授权数据这些可能要不同项目中用到。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
javascript中万恶的function实例分析
May 25 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
js获取form的方法
May 06 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 #Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 #Javascript
AngularJS折叠菜单实现方法示例
May 18 #Javascript
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
easyUI下拉列表点击事件使用方法
May 18 #Javascript
You might like
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP中session变量的销毁
2014/02/27 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
Javascript !!的作用
2008/12/04 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
web前端开发也需要日志
2010/12/09 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
项目投资意向书范本
2015/05/09 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers