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


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插件
Sep 14 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
简单实现JS计算器功能
Dec 21 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
Vue组件系列开发之模态框
Apr 18 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中常见的mongodb查询操作
2013/06/20 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php链表用法实例分析
2015/07/09 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python3计算三角形的面积代码
2017/12/18 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python高斯消除矩阵
2019/01/02 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python django生成迁移文件的实例
2019/08/31 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
先进教师个人总结
2015/02/11 职场文书
优秀员工自荐书
2015/03/06 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
详解Nginx 工作原理
2021/03/31 Servers