入门教程
官网
安装SCSS/SASS编译插件并引入
安装地址:https://ext.dcloud.net.cn/search?q=sass
然后就可以开始搭建项目了
项目搭建
工具
HbuilderX：https://dcloud.io/hbuilderx.html
创建项目
点击创建即创建成功
项目结构
配置开发微信小程序
【第一步:】配置微信开发者工具路径
工具–>设置—>运行配置
【第二步:】配置微信小程序对应的AppID
manifest.json—》微信小程序配置
【第三步:】打开微信小程序服务端口(在微信开发者工具中)
设置–》安全设置
【第四步:】实现案例并且运行项目
创建页面
选择使用scss页面
创建4个页面,cart,cate,home,my
创建icon文件
放在static静态资源下
配置pages.json
{
"pages": [{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "uni-app"
}
} ,{
"path" : "pages/cart/cart",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/cate/cate",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/my/my",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
},
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/icons/home.png",
"selectedIconPath": "static/icons/home-o.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/icons/category.png",
"selectedIconPath": "static/icons/category-o.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/icons/cart.png",
"selectedIconPath": "static/icons/cart-o.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/icons/my.png",
"selectedIconPath": "static/icons/my-o.png"
}
]
}
}
运行
运行成功~