微信小程序开发经验总结

1.project.config.json：项目配置文件，包括appid、项目名称等项目配置信息

2.app.wxss:全局样式

介绍公共样式、第三方样式等（按功能模块划分）

@import“public/css/reset.wxss”；//重置样式

@import“public/css/header.wxss”；//普通头

@import“public/css/footer.wxss”；//公共尾部

@import“public/css/commonDom.wxss”；//常见dom样式

3.app.Json：小程序全局配置，小程序由哪些页面组成，以及配置小程序的窗口，如背景颜色、导航颜色、导航文章样式等

pages:[]//每个页面的路径

窗口：窗口配置

选项卡栏：配置导航选项卡

4.app。js：侦听和处理小程序生命周期，并声明一些全局方法和属性

//常用功能模块介绍

从'./pubic/js/verify'导入验证；//定期匹配验证模块

从'./pubic/js/localstorage'导入验证；//本地存储技术模块

…（值得讨论的是，公共功能模块是放在public还是utils文件夹中。）

app({

onLaunch（）｛｝//程序初始化执行此方法

})

5.README.md：项目描述文件

6.utils：用于存储一些全局js文件。一些供公共使用的事件处理代码文件可以放在此文件夹中进行全局调用。对于允许外部调用的方法，它们可以在通过require或import引入其他js文件之前用module.exports公开。

注意：默认情况下有一个utils/utils.js

7.public：存储静态资源文件，按资源类型可分为css、js、images等

Css：存储公共Css，并按功能模块创建公共Css如reset、header、footer

Js：存储公共Js，创建函数Js，如localstorage，并通过函数模块验证

图片：当有很多图片时，最好将子文件夹细分

8.页面：主要用于存储小程序的页面文件。每个文件夹都是一个页面。文件名必须与页面的文件夹名相同。

Wxml:结构-----必须具有

Wxss:演示文稿（独立样式）

Js：行为-----必需

Json：配置文件，用于修改导航栏等的显示样式

注意：小程序的每个页面必须有wxml和js文件，其他两种类型的文件是不必要的。文件夹分为功能模块。页面直接管理选项卡模块，如主页、商品、订单和我。每个选项卡根据功能模块继续创建子页面。

9.过滤器：数据过滤（filter）方法

Wxs：它用于增强wxml标记的表达能力，类似于js，但有一些限制。例如，不能使用ES6语法

程序：

a、 创建一个新的wxs文件，在其中写入一些数据过滤方法，然后通过module.exports公开它们

b、 在业务页面wxml中引用wxs，<；/wxs>

c、 使用过滤器，＜text＞｛｛dateFr.getTime（item.createdAt，“：”）｝｝＜/text＞

注意：Wxs与js不同。许多js api不支持它，因此在实际开发中它是无用的。

10.总结：

A、 基于MVC开发模式，语法逻辑类似于vue

b、 建议使用flex进行布局、部分百分比和特殊媒体查询

c、 布局单元采用微信小程序特有的rpx单元，rpx可以根据屏幕宽度自适应

原则：rpx使用iPhone 6作为基准，指定屏幕宽度为750rpx，iPhone屏幕宽度为375px，因此1px=2rpx（建议设计草案以iPhone 6的尺寸作为视觉标准草案）