微信小程序开发经验总结

1.project.config.json:项目配置文件,含有appid、项目名称projectname等项目配置信息


2.app.wxss:全局样式

    引入公共样式、第三方样式等(按功能模块划分)

    @import "pubic/css/reset.wxss";//重置样式

    @import "pubic/css/header.wxss";//公共头部

    @import "pubic/css/footer.wxss";//公共尾部

    @import "pubic/css/commonDom.wxss";//公共dom样式


3.app.json:小程序全局配置,配置小程序是由哪些页面组成的,还有配置小程序的窗口,如背景颜色、导航的颜色、导航文章样式等

    pages:[]//各大页面路径

    window:窗口配置

    tabBar:配置导航tab


4.app.js:监听并处理小程序生命周期,声明一些全局方法、属性

    //引入公共功能模块

    import verify from './pubic/js/verify';//正则匹配验证模块

    import verify from './pubic/js/localstorage';//本地存储技术模块

    ......(至于公共功能模块放在public还是utils文件夹下还值得探讨)

    App({

        onLaunch(){}//程序初始化执行此方法

    })


5.README.md:项目说明文件


6.utils:用于存放全局的一些js文件,公共用到的一些事件处理代码文件可以放到该文件夹下,用于全局调用,对于允许外部调用的方法,用module.exports进行暴露,才能在其他js文件中通过require或者import引入。

    说明:默认有个utils/utils.js


7.public:存放静态资源文件,按资源类型可分为css、js和images等

    css:存放公共css,按功能模块新建reset、header、footer等公共css

    js:存放公共js,按功能模块新建localstorage、verify等功能性js

    images:图片多的时候最好也细分一下子文件夹


8.pages:主要存放小程序的页面文件,每个文件夹为一个页面,文件名须与页面的文件夹名相同。

    wxml:结构-----必有

    wxss:表现(独立样式)

    js:行为-----必有

    json:配置文件,用于修改导航栏显示样式等

    说明:小程序每个页面必须要有wxml和js文件,其他两种类型的文件可以不需要。文件夹按功能模块分,pages下直接管辖tab模块,如home、 goods、order、me等,每个tab下继续按功能模块新建子页面。


9.filter:数据过滤(filter)方法

    wxs:作用是增强wxml标签的表达能力,类似于js,但有所限制,如es6语法不能使用

    使用步骤:

        a.新建wxs文件,里面写一些数据过滤方法,然后通过module.exports暴露

        b.在业务页面wxml中引用wxs,<wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>

        c.使用filter,<text>{{dateFr.getTime(item.createdAt,':')}}</text>

        说明:wxs不同于js,很多js的api是不支持的,所以在实际开发中并没有什么卵用。


10.总结:

    a.基于MVC开发模式,语法逻辑类似于vue

    b.布局建议采用flex,局部百分比,特殊媒体查询

    c.布局单位采用微信小程序独有的rpx单位,rpx可根据屏幕宽度自适应

    原理:rpx以iPhone6为基准规定屏幕宽750rpx,iPhone屏幕宽375px,故1px=2rpx(建议设计稿以iphone6尺寸做为视觉标准稿)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容