小程序之吸星大法-搬部分页面为我用--【浅入深出系列004】

简介: 小程序之吸星大法-搬部分页面为我用--【浅入深出系列004】这是我的CSDN 的文章 转过来,可能有些许错误。请留言

微信目录集链接在此:

不会导入/打开小程序的看这里:参考

本系列校训

用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:
...
P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。

啥叫开发

在这里插入图片描述
那我刚好就看到别人有很漂亮的一个页面,比我的那个页面要漂亮太多。那我要是不“参考参考”我不是感觉亏了一个亿?
你们做软件开发的是不是都是抄别人的?源代码复制粘贴一下就出来了,还收我们这么贵的费用,真是太不道德了!
听完这个我哭笑不得,确实,网上有很多这样的段子,说开发APP就是这个抄那个,那个抄这个的。其实站在程序员的角度,的确有80%的代码都是复制粘贴的,剩下可能只有20%是程序员自己花精力、花时间写出来的。
但是你有没有想过一个程序员从他的毕业到他工作,至少要有五年的工作经验,才有机会、才有能力接这个外包开发,你看似简单的复制粘贴,是程序员花了多年寒窗苦读,外加多年的工作经验换来的。
讲一个故事:
1923年,美国福特公司的一台大型电机发生了故障。为了查清原因排除故障,公司将电机工程师协会的专家们请来“会诊”,但一连数月毫无收获。后来,他们请来移居美国的德国科学家斯坦敏茨。斯坦敏茨在电机旁搭了座帐篷住下来,忙碌了两天两夜。最后,他在电机旁用粉笔画了一道线,吩咐说:“打开电机把此处的线圈减少16匝,故障就可排除。”工程师们照办了,电机果然运转正常。结账时,斯坦敏茨向福特公司索要1万美金的酬金。有人说:“你只是用粉笔画了一条线凭什么值1万美金?这简直是敲诈勒索!” 斯坦敏茨莞尔一笑,随即在付款单上写下这样一句话:“用粉笔画一条线值1美金。知道在那里画线值9999美金。
所以,同样的复制C,粘贴V。别人能让项目正常的运转,而你复制C,粘贴V之后,可能会让正常的项目出现错误。

选择目标

这里有两个项目,右侧就是我相中的啥啥都有。怎么看都比左侧的顺眼。好了,我打算使用失传多年的绝学--吸星大法,将整个页面大移植!
在这里插入图片描述

步骤

第一步,把冰箱门打开,第二步把大象放进去,第三步,关上冰箱门。齐活!就是这么的自然。
错了,重来。

第一步,把原项目打开。

在这里插入图片描述

先改动一下最显眼的代码验证页面

比如删掉一个代码块。再比如,修改测试两个字,或者是普通会员改成普通A会员。(过程略)

再打开目标项目。(找到大象)

在这里插入图片描述
同样的方法,还是先要确认代码是不是就是这个要展示的页面。通过修改余额,积分,或积分签到等最易检验页面改动的地方。记得改过之过,要保存,一般来说保存了之页,微信开发者平台会自动编译,呈现最新的改动。然后,确认了之后,再把文字改回去
很多的时候,一些程序员感觉这一步有些多余。但是实际上,操作熟练之后,几乎就是一分钟的事情。一旦养成了这种习惯,就是修改代码先确认页面的习惯,后面的项目开发会让你很顺利。

第三步 狸猫换太子(把大象放进冰箱)

在这里插入图片描述
在这里插入图片描述
都打开了,双方的资源管理器了。那还说啥?CV吧。
在这里插入图片描述
要注意的是,还要把资源的文件也复制过去。
在这里插入图片描述

不然会报错的。
在这里插入图片描述

到原项目里将页面放到底部标签里

注意这里的代码

{
        "pagePath": "pages/user/index/index",
        "iconPath": "img/my.png",
        "selectedIconPath": "img/my1.png",
        "text": "我的"
      }

改成:

 {
        "pagePath": "pages/person/person",
        "iconPath": "img/my.png",
        "selectedIconPath": "img/my1.png",
        "text": "我的"
      }

同时还有在

 "pages": [
    "pages/home/index/index",
    "pages/scar/index/index",
    "pages/user/index/index",
    "pages/auth/auth"
  ],

加入这个页面
打开相应的JS文件。如:

"pages": [
    "pages/home/index/index",
    "pages/scar/index/index",
    "pages/user/index/index",
    "pages/person/person",
    "pages/auth/auth"
  ],

最后的项目(关上冰箱门)

现在再来看项目,如果有小错误自己要修复一下,不过中间的过程没出错的话这里是没有错的
在这里插入图片描述

配套资源

原项目(我的项目)
让别人的小程序长成自己的样子-【浅入深出系列001】配套资源
参考项目
拿别人的页面给我的小程序加码-【浅入深出系列004】配套资源-参考项目
https://download.csdn.net/download/dearmite/88065784

作业:(难度★★✫✰✰)

下载参考项目1,项目2 。将参考项目(项目2)的“我的”页面移植到项目1中

相关文章
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
82 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
4月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
4月前
|
缓存 小程序 数据库
小程序页面之间(传值)传递数据的方法
小程序页面之间(传值)传递数据的方法
194 63
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
3月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
401 5
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
4月前
|
小程序 开发者
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
|
5月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
275 0
【微信小程序开发实战项目】——个人中心页面的制作
|
5月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
下一篇
DataWorks