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


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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
JavaScript中return用法示例
Nov 29 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
基于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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Python基础教程之异常详解
2019/01/10 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
函授本科自我鉴定
2013/11/03 职场文书
高中军训感言400字
2014/02/24 职场文书
团日活动总结书格式
2014/05/08 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
小学数学教师研修日志
2015/11/13 职场文书
怎么用Python识别手势数字
2021/06/07 Python
Python中字符串对象语法分享
2022/02/24 Python