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


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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JS Math对象与Math方法实例小结
Jul 05 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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 curl的深入解析
2013/06/02 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
BootStrap selectpicker
2016/06/20 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python psutil模块简单使用实例
2015/04/28 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
python 字符串常用函数详解
2019/09/11 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
通过自学python能找到工作吗
2020/06/21 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
家装业务员岗位职责
2015/04/03 职场文书
困难补助申请报告
2015/05/19 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android