微信小程序小草商城

一:基础配置

1:创建项目


image.png

2:工具->运行配置

image.png

3:配置微信小程序manifest.json->微信小程序
image.png

appid
4:导入插件
工具->插件安装
image.png

下载vue插件
image.png

5:初始化git
① 项目根目录中创建.gitignore忽略文件:用来忽略一些不需要版本管理的文件
image.png

② unpackage目录下创建.gitkeep文件进行占位:因为忽略掉了unpackage里的唯一一个文件dist,unpackage也不会被git追踪,所以

③ 初始化本地仓库:git init / git add . / git commit -m '初始化项目'

④ 创建远程仓库,把本地仓库和远程仓库进行关联

2)tabBar页面
1:创建tabBar分支:git checkout -b tabBar
2:创建tabBar页面:
① 在pages右键新建页面 ⇒ 依次创建home、cate、cart、my页面
② 新建每个页面时有如下配置:css样式用的是scss
3:页面新建成功:pages.json文件中 ⇒ pages节点中生成每个tabBar页面的页面路径
4:配置tabBar效果:pages.json文件 ⇒ 配置tabBar节点。代码和在微信开发者工具中的配置是一样的

"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/table.mag/首页.png",
"selectedIconPath": "static/table.mag/主页.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/table.mag/分类.png",
"selectedIconPath": "static/table.mag/分类 (1).png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/table.mag/购物车满.png",
"selectedIconPath": "static/table.mag/购物车满.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/table.mag/my.png",
"selectedIconPath": "static/table.mag/my.png"
}
]
}
5:配置全局样式

"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小曹商城",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
6:分支的提交与合并
① 进行本地commit提交:git add . / git commit -m "完成了 tabBar 的开发"
② 提交到远程仓库进行保存:git push -u origin tabBar
③ 将tabBar代码合并到主分支:git checkout master / git merge tabBar

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容