• 01 uniapp/微信小程序 项目day01

    一.起步

    1.1 配置uni-app开发环境

    什么是uni-app，就是基于vue的一个开发框架，可以将我们写的一套代码，同时发布到ios、安卓、小程序等多个平台

    image-20220809181628923

    官方推荐使用Hbuilderx来写uni-app项目

    下载之后可以将预设改为vscode

    image-20220809183206627

    进入hbuilder插件市场下载scss插件

    image-20220809183343350

    1.2 初始化uni-app项目

    创建一个uni-app项目

    image-20220809183922387

    如果把小程序项目运行到微信开发者工具：

    首先manifest.json配置自己的id

    image-20220809184826603

    然后工具 设置 运行设置 找到微信开发者工具的安装路径

    image-20220809184937147

    然后记得我们的开发者工具需要开启端口

    image-20220809185209469

    然后运行到微信小程序

    image-20220809184957267

    关闭提示：

    image-20220809190411278

    以前的做法是直接在config.json里面改

    image-20220809190443122

    但是我们这个项目是hbuilder渲染过来的，所以应该在这边改，具体在

    manifest里面源码视图，最下面的mp-weixin，checkSiteMap为fasle

    image-20220809190732109

    git管理项目：

    首先需要创建一个忽略文件

    image-20220809191538551

    里面写上两个要忽略的目录

    image-20220809191640984

    首先我们说过node_modules都是存放的第三方包，再进行传输的时候不需要传来传去，所以直接忽略

    第二个文件下面放的其实就是打包出来的文件，我们的微信小程序也就是读取的这里面的文件

    image-20220809191742406

    但是要注意一点

    image-20220809191812284

    然后打开目录，运行git init初始化git目录，再 git add .将所有文件放到暂存区，最后 git commit提交一次所有文件

    image-20220809192124928

    将项目上传到gitee：

    image-20220809193341059

    创建仓库后通过这两个命令关联项目并把它上传上来

    image-20220809193649758

    1.3 配置tabBar效果

    这次采用不同分支来做，首先创建一个tabbar的分支

    image-20220809194520672

    快速创建page页，在page上新建页面即可

    image-20220809194653372

    四个页面出来就去配置tabbar，直接在pages.json里面配置

    image-20220809195259271

    注意把pages.json还有pages里面的index删除，否则可能渲染不出来

    1.4 导航条

    直接在page.json修改 globeStyle

    image-20220809201421741

    注意先把每个页面设置里面的style的标题为空删除才行

    image-20220809201445244

    1.5 分支提交与合并

    作为一个分支如何来提交合并

    首先在tabbar分支进行暂存和本地提交

    image-20220809201620266

    然后将本地的tabbar分支推送到远程仓库保存

    image-20220809201658833

    这个时候远程仓库只是有了新的分支，但是还没有文件目录

    image-20220809201816756

    继续和主分支合并

    image-20220809202053365

    合并之后没有冲突记得push上来

    image-20220809202735277

    如果有错误记得主分支暂存并提交一次仓库

    最后删除tabbar分支即可

    image-20220809202823323

    二.首页

    image-20220810181845847

    2.1 配置网络请求

    首先创建一个home分支

    image-20220810183019376

    由于小程序没有axios，而wx.request功能也比较简单，不支持拦截器等一些功能，所以推荐使用一个包 @escook/request-miniprogram来发起网络请求

    官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

    安包之前记得初始化

    image-20220810183401446

    然后参考文档进行引用，uni的网络请求是在main.js操作

    需要注意的是，uni的顶级对象是uni.不再是wx.

    image-20220810183558576

    请求和响应拦截器都在main入口文件里面定义

    image-20220810183658013

    2.2 轮播图

    首先获取轮播图数据：

    注意这里虽然是回到vue的语法，但是生命钩子还是用的微信的

    image-20220810184525484

    入口文件配置baseUrl

    image-20220810184800559

    image-20220810190015630

    渲染结构：

    image-20220810191133452

    目前scss语法跟less一样展现出嵌套关系

    image-20220810191346280

    2.3 配置小程序分包

    首先需要创建分包的目录

    image-20220810191945819

    然后再pages.json里面和pages同级声明subPackages配置

    root表示分包的目录，pages表示分包的每一个页面

    注意对象包裹，以及里面都有引号

    image-20220810192602099

    接下来右键subpkg创建一个页面，注意勾选在pages中注册

    注意要先保存上面的才会出现选择分包按钮

    image-20220810192719830

    2.4 点击轮播图跳转详情页

    首先要将我们之前图片外面包裹的view组件改为navigator

    注意怎么来跳分包的，直接写路径

    image-20220810193405846

    然后我要传参数过去

    image-20220810193506004

    2.5 封装toast

    因为我们每次请求数据，回来都会去发一次toast这个api去告诉失败或者成功很麻烦，所以可以直接封装一个在入口文件里面

    image-20220810194116195

    2.6 分类导航

    首先获取数据

    image-20220810195233718

    渲染结构

    image-20220810195621140

    接下来做一个编程式导航跳转

    注意要跳tabBar只能switchTap

    image-20220810195849572

    2.7 楼层区域

    楼层标题：

    首先还是获取楼层的数据

    image-20220810200812263

    然后渲染上去先渲染标题部分

    image-20220810201040350

    内容区域：

    image-20220810202401561

    注意回顾一下vue style要写为｛｝，mode为widthFix表示宽度固定高度自适应

    右边怎么来排除第一个

    image-20220810202648948

    点击每一项进入详情页：

    首先创建分包

    image-20220810203445957

    然后查看一下我们的数据

    image-20220810203517094

    你会发现接口要跳转的地址跟我们的分包的地址不同，所以这个时候应该在我们获取接口这里做一下处理

    这里最重要的是将我们的参数转为数组用？分割然后拼接进我们新的url字符串这一个处理思路

    image-20220810203835816

    image-20220810203843671

    然后将我们之前的代码修改一下作声明式导航

    image-20220810204125433

    2.8 分支合并与提交

    image-20220810204525694

    完成了分支的暂存、提交、以及推送之后就回到主分支

    注意切换到主分支后，主分支要进行一次暂存，并提交到本地仓库，然后再合并merge，在git push推送就不会冲突

    image-20220810204828143

    最后删除home分支


    __EOF__

  • 本文作者： Heymar
  • 本文链接： https://www.cnblogs.com/heymar/p/16712128.html
  • 关于博主： 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
  • 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。
  • 相关阅读:
    QT: QChart柱状图和曲线图实现
    《从零开始学ARM》勘误
    530. 二叉搜索树的最小绝对差
    BCS 2022大湾区网络安全峰会 | 美创CTO分享数据安全风险治理实践
    NLP自然语言处理简介
    典型行业大数据应用和安全风险和解决方案
    php 进程池设计与实现，phper必学！
    T293037 [传智杯 #5 练习赛] 白色旅人
    AVL 树
    Tensorflow笔记——神经网络优化
  • 原文地址：https://www.cnblogs.com/heymar/p/16712128.html