现在小程序越来越火,各大平台都有自己的小程序。微信小程序、支付宝小程序、头条小程序、抖音小程序、百度小程序等。现在我们来看下微信小程序是怎样开发的。
第一步:熟悉小程序项目文件目录,
1、app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释
2、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
3、微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页
4、app.js 主要是全局公共的js方法声明及调用所在的文件
5、app.json 是小程序整个的配置文件,所有页面都在此注册,不然不能访问。会报错
6、app.wxss 是全局的css文件, 公共css写在该文件中
7、 .wxml后缀的文件是页面结构文件
8、 微信小程序是微信全新定义的规范,是基于xml+js的。不支持也不兼容HTML
第二步:熟悉app.json项目配置,底部tabbar、页面路径,项目标题,导航,字体颜色等。
"window": {
"backgroundTextStyle" : "#000" //下拉背景字体,loading图的样式
"navigationBarBackgroundColor" : "red" //导航标题背景色
"navigationBarTitleText": "标题", //导航标题内容
"navigationBarTextStyle": "#fff" //导航标题字体颜色
enablePullDownRefresh : false / true //是否开启下拉刷新
},
"tabBar": {
"color": "#999999", //底部导航字体颜色
"selectedColor": "#f3c04b",//底部导航选中字体颜色
"borderStyle": "#dcdcdc" , //底部导航上边线颜色
"backgroundColor": "#f6f6f6", //底部导航背景色
"list": [
{
"pagePath": "pages/home/index", //页面路径
"iconPath": "image/tabbar/icon-1.png",//默认图标
"selectedIconPath": "image/tabbar/icon-1-1.png",//选中当前图标
"text": "首页"//tabbar标题
},
{
"pagePath": "pages/sort/index",
"iconPath": "image/tabbar/icon-2.png",
"selectedIconPath": "image/tabbar/icon-2-1.png",
"text": "分类"
},
{
"pagePath": "pages/order/index",
"iconPath": "image/tabbar/icon-2.png",
"selectedIconPath": "image/tabbar/icon-2-1.png",
"text": "购物车"
},
{
"pagePath": "pages/my/index",
"iconPath": "image/tabbar/icon-3.png",
"selectedIconPath": "image/tabbar/icon-3-1.png",
"text": "我的"
}
]
},
第三步:小程序路由
wx.switchTab 跳转到tabBar页面,并关闭其他所有非tabBar页面
wx.reLaunch 关闭所有页面,打开到应用内的某个页面
wx.redirectTo 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面
wx.navigateTo 保留当前页面,跳转到应用内的某个页面,但是不能跳转tabbar页面。
wx.navigateBack 关闭当前页面,返回上一页面或多级页面。
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release" class="nav"></navigator>// 跳转到新的小程序
注意事项:
1、背景图片不识别,解决办法:把图片上传至服务器,把地址写在背景路径,或者把图标转换
2、底部导航栏 tabBar底部导航栏 tabBar是一个数组,只能配置最少2个、最多5个tab
3、小程序中不能和字节操作Window对象,document文档。小程序中不能和字节操作Window对象,document文档。
4、小程序脚本逻辑实在JsCore中运行,JsCore是一个没有窗口的对象环境,所以不能再脚本中使用window、zepto、jQuery。
5、样式表不支持级联选择器, WXSS支持以 . 开始的类选择器
6、tabBar的页面用switchTab进行调整, tabBar的页面用switchTab进行调整, 没有tabBar的页面用navigateTo进行调整
第一天的知识就到这了,有不明白的可以留言。