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


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 相关文章推荐
javascript一点特殊用法
May 28 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
JavaScript实现点击切换功能
Jan 27 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 邮件发送问题解决
2014/03/22 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python空元组在all中返回结果详解
2020/12/15 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
大学生旅游业创业计划书
2014/01/29 职场文书
外联部演讲稿
2014/05/24 职场文书
四查四看整改措施
2014/09/19 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
教师个人年度总结
2015/02/11 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
四年级数学教学反思
2016/02/16 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
MySQL transaction事务安全示例讲解
2022/06/21 MySQL