评论

小程序开发经验总结,流水化作业,防止采坑。

小程序开发经验总结,流水化作业,防止采坑。

接到一个 小程序 项目后,我一般是这样的工作流程:

第一步:对小程序页面功能进行一个整体规划,与客户达成一致。

第二步:建立项目开发,项目开发过程具体注意事项有如下:

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尺寸做为视觉标准稿)

第三步:项目开发完毕,进行三轮测试。

第四步:交付给客户使用。ok啦!!

欢迎一起跟我交流小程序开发问题,点击“小程序定制开发” 就可以找到我啦。另外给大家线上一个超级实用的链接,小程序功能更新动态链接:http://www.tlio.cn/xiaochengxuzixun/xiaochengxuguanfang/index.html


作者:jhejian

链接:https://www.jianshu.com/p/fb3199a85d6f

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

最后一次编辑于  03-09  
点赞 0
收藏
评论
登录 后发表内容