我的小程序啊_小程序我得-CSDN博客

本文链接：https://blog.csdn.net/qq_42893625/article/details/88357925

写小程序遇到的坑

坑1：微信开发者工具上可以显示小程序的图片，扫码在手机端调试却不显示

就是像这种的，本该显示图片的地方在手机端却显示空白
主要是因为图片命名的问题，一开始用的中文，后来改成了英文，就可以正常显示了。但是，设置头像命名的时候我用的head portrait，手机端图片就又不显示了。一脸懵逼，后来查了别人的博客，原来还不能用空格的。后来手机端就可以显示美美的小程序啦。开心开心，折腾折腾终于从坑里逃出来啦

3月14日更新

关于数据绑定

有一串代码是这样写的： class=‘two_image’ 但是在two.js里面写的时候就报错了。
原来命名只能用_(英文输入法下的这个下划线 )不能用这种漂浮在中间的划线 -
命名一定要规范啊，一把鼻涕一把泪的真的是要被自己蠢哭。

想把图片在js文件夹里面全部嵌套起来：

 <view class='two-author-date'>
    <image class='two-author' src='{{img.author_img}}'></image>
    <text class='two-date'>{{date}}</text>
  </view>

这里出现的错误点依然是命名上的错误,在此之前的命名一直是{{author_img}},导致小程序里面的图片一直不显示。后来加上了img.变成了{{img.author_img}}才可以。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var post_content1={
      img:{
        two_image: "/images/huaxi.jpg",
        author_img: "../../images/portrait/wanzitou.jpg"
      },
      two_content:"很多年以我坐在纽约的街头，听到一句话，觉得那时形容我的心境正合适——青春就是我抬起头，你刚好在。",
      view_num:"666",
      collect_num:"999",
    }
    this.setData(post_content1);
  },

3月15日更新

template模板化的技术

wxml的代码块（可以模板化的原wxml代码）

<import src="post_item/post_item_template.wxml" />
  <view>
    <swiper indicator-dots='true' autoplay='true' interval='1600'>
      <swiper-item>
        <image src='/images/gujin.jpg'></image>
      </swiper-item>
      <swiper-item>
        <image src='/images/guyun.jpg'></image>
      </swiper-item>
      <swiper-item>
        <image src='/images/zhedie.jpg'></image>
      </swiper-item>
      <swiper-item>
        <image src='/images/huaxi.jpg'></image>
      </swiper-item>
    </swiper>
  </view>

  <view>
    <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
    
      <template is="postitem" data="{{item}}"></template>
      
    </block>
  </view>

post_item_template.wxml代码块

<template name="postitem">
  <view class='two_container'>
    <view class='two_author_date'>
      <image class='two_author' src='{{item.avatar}}'></image>
      <text class='two_date'>{{item.date}}  {{idx}}</text>
    </view>
    <text class='two_title'>{{item.title}}</text>
    <image class='two_image' src='{{item.imgSrc}}'></image>
    <text class='two_content'>{{item.content}}</text>
    <view class='two_like'>
      <image class='two_like_image' src='../../images/icon/shoucang.png'></image>
      <text class='two_like_font'>{{item.reading}}</text>
      <image class='two_like_image' src='../../images/icon/pinglun.png'></image>
      <text class='two_like_font'>{{item.collection}}</text>
    </view>
  </view>
</template>

总结：
1.在原wxml利用import引入时忽略双标签的特性，后来在后面加入斜杠小程序页面才正常显示。（这个import导入的时候可以使用相对路径也可以使用绝对路径的，但大多地方只能用相对路径）

2. ****这一行代码中，is等于的是模板的名字postitem，在用wx：for循环的时候相当于是把很多的代码块填充到剪切了的代码块里面来了。那么现在同样需要一个代码块来填充模板。所以用data="{{item}}"进行数据绑定。
补充一个蠢蠢的事情：
新写了一个跳转页面，兴冲冲在手机上想看看效果，结果发现手机显示的还是几天前的页面，新写的页面并没有出现。还以为是代码没有保存或者出错的原因折腾半天。其实是因为真机调试里面重新扫码更新再在手机端查看。（哈哈哈哈哈，要被自己笑死了~）

3月17日更新
写出来的小程序总是和导航栏之间空了一块，写的<view class="container"></view>而container自带样式，换个class名字就解决了。

4月3日更新
真的是拖了好久才进行更新。期间正在写的小程序进行大换血了一次。主要原因我觉得有两点：
1.没有做足大量的竞品分析工作。
2.技术薄弱。我做出来的UI设计图没有考虑到团队的技术水平，很多功能现在暂时还无法去进行实现。
这几天把UI原型图重新设计了一份，也看了不少其他优秀的小程序，真的觉得小程序的大换血在一开始就是有伏笔的。不过依旧继续努力哒，今天开始写啦~

很想写写关于前端学习的，因为感觉自己走了很多坑
首先反思自己的是“别太骄傲，你不特殊”。总因为自己的学习速度比身边的人快而沾沾自喜，很少花更多的时间去仔细深究代码的设计模式这种，只是学到了皮毛，却以为自己已经潜到了深海。
再次就是学习不能中断。一定要每天都定时定量的学习。技术这个东西，毕竟有时候还是要熟练的。“一万小时定律”想想凭借断断续续的学习得多久。最重要的是遗忘和那种感觉。可能在某一个时间段你正在学习或者写代码非常有灵感，特别有激情，但是你中断了，过了几天你再投入进去的时候，虽然也能做到专注，但是已经没有前几天那种得心应手的感觉了。
这样计算一下，除去上课，每天学习四个小时，满足一万小时的话需要2500天，再一计算的话，约等于6.85年。这样一想，突然感觉到了巨大的压迫感。不写了，赶紧学习去。

2019/10/28更新

时隔半年之后再返回来看自己写的博客，啊啊啊啊啊真的心境已经很不同啦。可能是因为我成长了，虽然还是会遇到各种各样的坑，但是没有了当时遇见bug的那种慌乱。当时写小程序团队里就两个人，一个前端一个后台，然后我还负责竞品分析文档撰写，UI设计，前端所有的业务逻辑包括作品提交时候的视频剪辑。哈哈哈，从来没有想过自己会有一天会这么多东西，都是那一段短短的时间创造的咔咔咔，自恋一波~
哈哈哈哈哈，但是看着自己以前写的博客，真的好可爱哇，当然也挺喜欢现在的自己哈哈哈。继续加油咯~

2020/6/8
看看以前的博客，找找感觉。
有点迷茫，没有动力。害，以前为啥那么有动力？人和事都不真实。