首先我们要明确小程序需要哪几种文件。
微信小程序中就四种类型的文件:
-
js ---------- JavaScrip文件
-
json -------- 项目配置文件,负责窗口颜色等等
-
wxml ------ 类似HTML文件
-
wxss ------- 类似CSS文件
在根目录下用app来命名的这四种类型的文件,就是程序入口文件。具体介绍如下:
app.json
必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,
你只需创建这个文件,里面写个大括号就行。以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。
app.js
必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
这个文件不是必须的。因为它只是个全局CSS样式文件
app.wxml
这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
有了这两个文件你运行程序,IDE就不会报错了。
接下来我会向大家介绍一下商城小程序小程序
首先先向大家展示一下效果。
下来我会给大家这四个文件源码
-
app.js:
App({ })
-
app.json:
{ "pages": [ "pages/index/index", "pages/faxian/faxian", "pages/xiaoxi/xiaoxi", "pages/wode/wode", ap "pages/spdetail/spdetail", "pages/pay/pay" ], "window": { "navigationBarTextStyle": "white", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#69c3aa", "backgroundColor": "#fbf9fe" }, "tabBar": { "color": "#929292", "backgroundColor": "#ffffff", "selectedColor": "#69C3AA", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "image/shouye1.png", "selectedIconPath": "image/shouye.png" }, { "pagePath": "pages/faxian/faxian", "text": "活动", "iconPath": "image/huodong1.png", "selectedIconPath": "image/huodong.png" }, { "pagePath": "pages/xiaoxi/xiaoxi", "text": "购物车", "iconPath": "image/car1.png", "selectedIconPath": "image/car.png" }, { "pagePath": "pages/wode/wode", "text": "我的", "iconPath": "image/wode1.png", "selectedIconPath": "image/wode.png" } ] } }
-
app.wxml:这个设置成空文件就可以了。
-
app.wxss:
page { background-color: #f5f6f7; height: 100%; letter-spacing: 1px; }
最后这些源码仅供参考,要是会编程的可以参考一下要是不会编程的可以直接使用。下期我会介绍更多小程序实例。 -
后期我会定期发布小程序源码,欢迎大家的到来。