小程序项目（uniapp）
1.2 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
模板丰富
完善的智能提示
一键运行
当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！
#1.2.1 下载 HBuilderX
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
点击首页的
DOWNLOAD按钮选择下载
正式版->App 开发版
#1.2.2 安装 HBuilderX
将下载的
zip包进行解压缩将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
双击
HBuilderX.exe即可启动 HBuilderX
#1.2.3 安装 scss/sass 编译
为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
1.2 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
模板丰富
完善的智能提示
一键运行
当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！
#1.2.1 下载 HBuilderX
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
点击首页的
DOWNLOAD按钮选择下载
正式版->App 开发版
#1.2.2 安装 HBuilderX
将下载的
zip包进行解压缩将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
双击
HBuilderX.exe即可启动 HBuilderX
#1.2.3 安装 scss/sass 编译
为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
1.2.4 快捷键方案切换
操作步骤：工具 -> 预设快捷键方案切换 -> VS Code
#1.2.5 修改编辑器的基本设置
操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置
源码视图下可用的参考配置：
{"editor.colorScheme": "Default","editor.fontSize": 12,"editor.fontFamily": "Consolas","editor.fontFmyCHS": "微软雅黑 Light","editor.insertSpaces": true,"editor.lineHeight": "1.5","editor.minimap.enabled": false,"editor.mouseWheelZoom": true,"editor.onlyHighlightWord": false,"editor.tabSize": 2,"editor.wordWrap": true,"explorer.iconTheme": "vs-seti","editor.codeassist.px2rem.enabel": false,"editor.codeassist.px2upx.enabel": false
}
Tips：可以使用 Ctrl + 鼠标滚轮 缩放编辑器
1.3 新建 uni-app 项目
文件 -> 新建 -> 项目
填写项目基本信息
项目创建成功
#1.4 目录结构
一个 uni-app 项目，默认包含如下目录及文件：
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
#1.5 把项目运行到微信开发者工具
填写自己的微信小程序的 AppID：
在 HBuilderX 中，配置“微信开发者工具”的安装路径：
在微信开发者工具中，通过
设置 -> 安全设置面板，开启“微信开发者工具”的服务端口：在 HBuilderX 中，点击菜单栏中的
运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：初次运行成功之后的项目效果：
取消控制台警告信息：
1.6 使用 Git 管理项目
#1.6.1 本地管理
- 在项目根目录中新建
.gitignore忽略文件，并配置如下：
# 忽略 node_modules 目录
/node_modules
/unpackage/dist
注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪
此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做
.gitkeep的文件进行占位
- 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：
git init
- 将所有文件都加入到暂存区：
git add .
- 本地提交更新：
git commit -m "init project"
#1.6.2 把项目托管到码云
注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）
生成并配置 SSH 公钥
创建空白的码云仓库
把本地项目上传到码云对应的空白仓库中
-----------------------------------------------------------------------------------------------------------------------------
tabBar：（小程序02）
实操步骤：
1.新建页面
2.配置tabBar
①和"globalStyle"平级，新增 tabBar 节点
"tabBar": {"backgroundColor":"#C0C0C0","selectedColor": "#C00000","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "static/tab_icons/home.png","selectedIconPath": "static/tab_icons/home-active.png"},{"pagePath": "pages/cate/cate","text": "分类","iconPath": "static/tab_icons/cate.png","selectedIconPath": "static/tab_icons/cate-active.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "static/tab_icons/cart.png","selectedIconPath": "static/tab_icons/cart-active.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tab_icons/my.png","selectedIconPath": "static/tab_icons/my-active.png"}]}2.3 删除默认的 index 首页
在 HBuilderX 中，把
pages目录下的index首页文件夹删除掉同时，把
page.json中记录的index 首页路径删除掉为了防止小程序运行失败，在微信开发者工具中，手动删除
pages目录下的index 首页文件夹同时，把
components目录下的uni-link 组件文件夹删除掉
#2.4 修改导航条的样式效果==》
3.2. window---（小程序02）---未复习！！！
打开
pages.json这个全局的配置文件修改
globalStyle节点如下：
{"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "黑马优购","navigationBarBackgroundColor": "#C00000","backgroundColor": "#FFFFFF"}
}2.5 分支的提交与合并
- 1将本地的 tabbar 分支进行本地的 commit 提交：
git add .
git commit -m "完成了 tabBar 的开发"
- 2将本地的 tabbar 分支推送到远程仓库进行保存：
git push -u origin tabbar
- 3将本地的 tabbar 分支合并到本地的 master 分支：
git checkout master
git merge tabbar
- 4删除本地的 tabbar 分支：
git branch -d tabbar3. 首页
#3.0 创建 home 分支
运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：
3.1 配置网络请求
.网络数据请求（小程序02）
复习：
由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。
请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档：https://www.npmjs.com/package/@escook/request-miniprogram
最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：
import { $http } from '@escook/request-miniprogram'uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'// 请求开始之前做一些事情
$http.beforeRequest = function (options) {uni.showLoading({title: '数据加载中...',})
}// 请求完成之后做一些事情
$http.afterRequest = function () {uni.hideLoading()
}3.2 轮播图区域
#3.2.1 请求轮播图的数据
实现步骤：
在 data 中定义轮播图的数组
在 onLoad 生命周期函数中调用获取轮播图数据的方法
在 methods 中定义获取轮播图数据的方法
示例代码：
export default {data() {return {// 1. 轮播图的数据列表，默认为空数组swiperList: [],}},onLoad() {// 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法this.getSwiperList()},methods: {// 3. 获取轮播图数据的方法async getSwiperList() {// 3.1 发起请求const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')// 3.2 请求失败if (res.meta.status !== 200) {return uni.showToast({title: '数据请求失败！',duration: 1500,icon: 'none',})}// 3.3 请求成功，为 data 中的数据赋值this.swiperList = res.message},},
}3.2.2 渲染轮播图的 UI 结构
知识点：轮播图组件的使用（小程序01）
渲染 UI 结构：
<template><view><!-- 轮播图区域 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 循环渲染轮播图的 item 项 --><swiper-item v-for="(item, i) in swiperList" :key="i"><view class="swiper-item"><!-- 动态绑定图片的 src 属性 --><image :src="item.image_src"></image></view></swiper-item></swiper></view>
</template>2.样式：
美化 UI 结构：<style lang="scss">
swiper {height: 330rpx;.swiper-item,image {width: 100%;height: 100%;}
}
</style>3. 分包（小程序05）
复习：
subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：
3.2.4 点击轮播图跳转到商品详情页面
知识点：声明式导航（小程序03）
将 <swiper-item></swiper-item> 节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性 的值。
--------------------------------------------------------------------------------下午：
渲染楼层的第一张图片（使用接口）对应的属性来进行渲染，样式的修改
2.左图片1层级
3.v-if和v-form不要同时使用！！！
小程序项目（uniapp）相关推荐
- 微信小程序转换为uni-app项目
[转成uni-app原因] 项目中遇到一个需求在微信小程序中无法实现.由于小程序中的限制太多,所以尝试把当前开发的微信小程序 转成 uni-app,再通过uni-app把前端代码打包成app从而解决问 ...
- uniapp微信小程序项目-优购商城
原网页笔记文档: https://www.escook.cn/docs-uni-shop/ 1. 起步 #1.1 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架 ...
- uniapp微信小程序项目启动步骤
如何创建项目就不说了,可以参考该链接: 如何创建开发uniapp微信小程序项目?链接: link 这里主要记录的是,从代码仓库拉取到本地后, 本地启动运行项目,遇到的问题. 1.下载项目 使用git ...
- 基于 uni-app 和 uni-cloud 小程序项目开发实战
基于 uni-app 和 uni-cloud 小程序项目开发实战 前言 一.技术栈 二.环境搭建 三.项目功能介绍 1.地图地点搜索及路线规划 2.uniCloud服务空间 3.AI识图 4.上拉框组 ...
- 怎么将微信小程序项目转为uniapp项目
将微信小程序项目转换为uni-app项目需要以下几个步骤: 安装uni-app开发工具:HBuilderX 在HBuilderX中创建一个新的uni-app项目 将微信小程序的代码复制到uni-app ...
- uni-app小程序项目发布流程
uni-app小程序项目发布流程 开发工具:HbuilderX编辑器.微信小程序开发工具 1.小程序开发工具就可以点击发行版本了 2.登录开发者平台配置域名白名单 在开发者设置里完成服务器域名配置(域 ...
- 微信小程序项目转uniapp踩坑日记
本文目录 一.前言 二.转换方式 三.后语 四.其他:node报错 1.包默认C盘存放,而不是安装目录E盘 2.正确的环境变量添加 3.npm install 命令报错 4.npm install - ...
- uni-app创建小程序项目并运行到微信开发者工具上@令狐张豪
在这直接说步骤 1. 创建uni-app小程序项目 2. 打开项目中的manifest.json文件进行配置 2.1 写入微信小程序AppID 2.2 打开HBuilder X 工具-设置 填写外部w ...
- uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...
最新文章
- 『模板 高精度计算』
- I.MX6 修改调试串口号（ttymx0 - ttymxc2)
- win10 没有选项 始终使用此应用打开此文件
- [Step By Step]SAP HANA创建层次结构的属性视图(Hierarchy Attribute View)
- 【深度探讨】阿里巴巴万级规模 K8s 集群全局高可用体系之美
- 双系统，重装windows后修复linux的grub启动
- Excel催化剂回顾2019年产出（文章合集），展望2020年
- SQL Server时间函数
- excel上传java_java：Excel操作之Excel上传
- python 循环控制语句结束,Python是如何循环控制语句的
- 使用Autodesk Vault插件向导轻松创建Vault插件
- 魔鬼定律：你一偷懒，必然出错，麒麟LINUX新版本无法安装
- 课程管理系统 Moodle 初体验
- html手机验证码登录页面代码,htmlunit 模拟登录 数字验证码(示例代码)
- 数字图像处理基础——图像空间操作的3种形式
- 木子-数据库-sqlServer数据库安装方式
- python画简便的图片-用python简单处理图片（5）：图像直方图
- 基于Android的学生信息管理大作业
- 产品包装设计在品牌和营销中的重要性
- java八大基本数据类型及其封装类