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


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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
JS实现商品橱窗特效
Jan 09 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
大三在校生电子商务求职信
2013/10/29 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
行政内勤岗位职责
2014/04/07 职场文书
班长竞选演讲稿
2014/04/24 职场文书
简单租房协议书
2014/10/21 职场文书
人事主管岗位职责
2015/02/04 职场文书
护士实习自荐信
2015/03/06 职场文书
工程合作意向书范本
2015/05/09 职场文书