一、使用HBuilderX开发
1.安装HBuilderX
安装地址:www.dcloud.io/hbuilderx.h…
2.创建项目
在点击工具栏里的文件 -> 新建 -> 项目:
选择uni-app
类型,输入工程名,选择模板,点击创建,即可成功创建。
选择的模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
二、将项目运行到微信开发者工具
1.设置微信小程序AppID
点击项目中的mainifest.json -> 微信小程序配置 -> 微信小程序AppID,填写自己项目的AppID。
2.设置微信开发者工具
点击任务栏中的工具 -> 运行配置 -> 小程序开发工具路径,填写本地的开发者工具路径。
3.在微信开发者工具中运行小程序
点击任务栏中的工具 -> 运行到小程序模拟器 -> 微信开发者工具。
项目经过uni-app编译后会生成小程序,自动打开微信开发者工具。生成的代码在unpackage目录下。
注意:由于小程序是通过自动编译形成的,所以不要在开发者工具中修改小程序代码,而要在HBuilderX中修改代码。
三、关闭sitemap
点击项目中的mainifest.json -> 源码视图 -> mp-weixin,添加"checkSiteMap": false。
保存代码后会自动编译,编译后的小程序的project.config.json文件中会出现"checkSiteMap": false。
四、使用Git管理项目
1.创建git忽略文件
在根目录中创建.gitignore忽略不需要跟踪的文件
/.gitignore:
/node_module
/unpackage/dist
因为忽略了/unpackage/dist文件夹,但是不想忽略/unpackage文件夹,所以在/unpackage中增加.gitkeep文件,保证unpackage目录能正常被git跟踪。
2.Git本地管理项目
在根目录中打开PowerShell执行以下代码:
- git init // 初始化git环境
- git add . // 将文件添加到暂存区
- git commit - m "项目框架" // 提交项目
3.将项目托管到码云上
- git remote add origin git@gitee.com:jixueyuandi/happy-store.git
- git push -u origin master
五、创建tabBar
1.git创建tabbar分支
- git checkout -b tabbar //创建tabbar分支
- git branch // 查看所有分支
2.新建tabbar页面
右击pages,新建页面,填写页面名称,选择scss模板。
创建home、cate、cart、my四个页面
3.设置tabBar
在/pages.json中添加tabBar设置
"tabBar": {
"selectedColor":"#d81e06",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/static/tab_icons/home.png",
"selectedIconPath": "/static/tab_icons/home-selected.png"
},
......
]
}
修改页面导航和页面背景
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "快乐商城",
"navigationBarBackgroundColor": "#c00000",
"backgroundColor": "#F8F8F8"
},
页面效果:
4.提交代码合并分支
提交本地代码:
- git add .
- git commit -m "完成tabbar功能开发"
将tabbar分支推送到远程仓库进行保存:
- git push -u origin tabbar
本地切换到master分支,合并tabbar分支,并提交到远程仓库
- git checkout master
- git merge tabbar
- git push
删除tabbar分支
- git branch -d tabbar
六、home页面
1.创建home分支,查看所有分支
- git checkout -b home
- git barnch
2.安装网络请求插件: @escook/request-miniprogram
- npm init -y
- npm install @escook/request-miniprogram
设置根路径、请求拦截、响应拦截
新建/utils/http.js:引入@escook/request-miniprogram包,设置根路径、请求拦截、响应拦截
// 倒人网络请求的包 @escook/request-miniprogram
import {$http} from '@escook/request-miniprogram'
// 请求根路径
$http.baseUrl = 'http://www.uinav.com'
// 请求拦截器
$http.beforeRequest = function(options) {
uni.showLoading({
title:'加载中......'
})
}
// 响应拦截器
$http.afterRequest = function(options) {
uni.hideLoading()
}
export default $http;
在/main.js中全局挂载:
// 全局挂载
uni.$http = $http
3.设置全局$showMsg()
在utils文件夹下新建showMsg.js:
let $showMsg = function(title = "数据请求失败!", duration=1500, icon="none") {
uni.showToast({
title:title,
duration:duration,
icon:icon
})
}
export default $showMsg;
在/main.js中全局挂载:
// 全局挂载
uni.$showMsg = $showMsg
4.完成home页面
/pages/home/home.vue
数据和vue一样写在data中,方法和vue一样写在methods中,生命周期和小程序一样。
<template>
<view>
<!-- 轮播图区域 -->
<swiper :indicator-dots="true" :autoplay="true" :duration="1000" :interval="3000">
<swiper-item v-for="(item, index) in swiperList" :key="index">
<navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
<image :src="item.image_src"></image>
</navigator>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [],
};
},
onLoad() {
this.getSwiperList();
},
methods:{
// 获取轮播图数据
async getSwiperList() {
const {data: resData} = await uni.$http.get('/api/public/v1/home/swiperdata');
if(resData.meta.status == 200) this.swiperList = resData.message;
}
}
}
</script>
<style lang="scss">
swiper {
height: 300rpx;
.swiper-item,image {
width: 100%;
height: 100%;
}
}
</style>
5.合并home分支
检查所在分支是home分支,查看当前文件状态:
- git branch
- git status
保存本地代码:
- git add .
- git commit -m "完成home页面功能"
home分支推送到远程仓库:
- git push -u origin home
本地切换到master分支,并合并home分支,并推送到远程仓库:
- git checkout master
- git merge home
- git push
删除本地home分支
- git branch -d home