小程序,项目的总结与思考

花了一个多月时间做了慕课网上的小程序项目,今天终于完结了,在这里记录下,梳理下小程序中的重点难点,最重要的是对于小程序项目的架构的思考,对于解决问题能力的提升

开始前的一些插曲,git的使用

以前对于git不是很懂,用的vscode直接提交的,但是这次用的微信开发工具没有源代码管理这个功能,就只能折腾了下git

(1)在本地创建一个版本库（即文件夹），通过git init把它变成Git仓库
(2) 把项目复制到这个文件夹里面，再通过git add .把项目添加到仓库
(3) 再通过git commit -m "注释内容"把项目提交到仓库 
由于本地Git仓库和Github仓库之间的传输是通过SSH加密的，所以连接时需要设置一下：
(4) 创建SSH KEY先看一下你C盘用户目录下有没有.ssh目录，有的话看下里面有没有id_rsa和id_rsa.pub这两个文件，有就跳到下一步，没有就通过下面命令创建
    $ ssh-keygen -t rsa -C "youremail@example.com"
然后一路回车。这时你就会在用户下的.ssh目录里找到id_rsa和id_rsa.pub这两个文件   
(5)然后打开码云的设置,里面的ssh公钥将id_rsa.pub里面的东西复制过去就行了
这样的话就建立了本地仓库与远程仓库的连接
(6)在码云上面新建一个Git创库(创建一个项目)
(7)在码云上创建好Git仓库之后我们就可以和本地仓库进行关联了
  git remote add origin 仓库地址
(8)关联好之后我们就可以把本地库的所有内容推送到远程仓库（也就是码云上）上了
  git push -u origin master
 由于新建的远程仓库是空的，所以要加上-u这个参数，等远程仓库里面有了内容之后，下次再从本地库上传内容的时候只需下面这样就可以了
 git push origin master
(9) 另外，这里有个坑需要注意一下:若新建远程仓库的时候自动创建了README文件会报错
这是由于你新创建的那个仓库里面的README文件不在本地仓库目录中，这时我们可以通过以下命令先将内容合并以下： git pull --rebase origin master
(10)至此将项目布置在码云上,以后的每次更改提交就可以直接在git bash上完成
要点是先将项目提交本地仓库,再从本地仓库提交远程仓库
(11)最后将下远程仓库版本回退方法
先用下面命令找到要回退的版本的commit id：
git reflog
接着回退版本:
git reset --hard Obfafd
紧接着强制推送到远程分支：
git push -f

git分支的管理

查看分支  git branch
创建分支  git branch <name>
切换分支：git checkout <name>

切换至主线分支 git checkout master  
拉取最新远程代码 git pull
合并某分支到当前分支：git merge <name>

本地主干分支推送到远端主干分支 git push origin  master:master

删除分支：git branch -d <name>
删除码云上的分支 git push --delete origin <name>

以前对于git不太熟悉，总感觉不太会，这次实践之后发现真的喜欢上这个工具，特别是版本回退，简直不要太方便

项目正式开始

在我看来一个新的项目开始前我们应该对这个项目有这一个整体的项目架构，小程序借鉴了vue的MVVM的开发思想,把渲染和逻辑分开，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系.因为以前做过vue项目所以对这个理解比较深刻些,根本原理就是数据驱动视图，正所谓页面开始数据先行,然后再借鉴wxml的模板语法将数据渲染进页面.

说了这么多先来几张项目的截图

项目的gitHub地址看这里虽是模仿但是有我自己的想法,还有好多收货

项目的文件夹如图所示，Page文件夹放着小程序的各个页面，utils文件夹里面放着工具函数，app.js文件时项目的全局js文件，相当于Vue的vuex，也是小程序的全局状态管理中心，app.json是小程序的全局配置文件

项目的重点难点梳理

小程序解签了vue思想，于是模板语法也在WXML提供（template），可以在模板中定义代码片段，然后在不同的地方调用。

模板语法（使用模板）

使用模板在使用模板之前，先把模板数据拿过来在post.js里面

 var postsData = require('../../data/posts-data.js')
 onLoad: function (options) {
    this.setData({
      postList: postsData.postList
    })
  }

 引入模板
 <import src="post-item/post-item-template.wxml"/>

<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx" wx:key="unique">
  <view catchtap="onPostTap" data-post-id="{{item.postId}}">
  在这里调用
    <template is="postItem" data="{{...item}}" />
    加上三个点的目的是为了在定义模板是不同数据里面加前缀，把item里面的数据展开
  </view>
</block>

定义模板

使用 name 属性，作为模板的名字。然后在 template 内定义代码片段，如：

<template name="postItem">
  <view class='post-container'>
    <view class='post-author-date'>
      <image class='post-author' src='{{avatar}}'></image>
      <text class='post-date'>{{date}}</text>
    </view>
  </view>
</template>

因为小程序的模板不想vue的模板直接就可以引入，必须在引入模板的wxss里面再把模板的css引入，就是在post.wxss里面通过important引入

@import "post-item/post-item-template.wxss";

这样的话整个模板就完成了，模板的使用是为了减少代码，方便多次调用，模板的data就是把post的数据传入post-detail里面，就相当于vue的props

阅读页面，点击进入不同的详情页面页面之间的跳转

在小程序中页面之间跳转传值是通过url带过去的，在post.js里面设置

通过在view标签设置自有属性data-post-id，将所选页面的postId传入要跳转的页面，之后在post-detail.js，里面取得postId,最后根据postId取出跳转页面对应的数据

列表页面的收藏

收藏效果如图所示（文章详情页面的收藏，我们有多个详情页，返回之后再重新进入，页面是否收藏不变）综上所述，我们用小程序的缓存 wx.setStorage

整体思路是这样的,我们设置一个缓存的对象集合,给每个页面缓存一个状态,当我们进入页面时
先判断是否存在缓存,有过有按照缓存的状态渲染页面,如果没有给页面设置一个缓存,点击
之后先给缓存的状态去反,然后再根据状态渲染页面

这个缓存的效果把，小程序数据驱动视图的思想体现的淋漓尽致，一切的ui页面的改变，背后都是数据的变化

缓存的总体效果如下
var postsCollected={
    "0":true,
    "1":false,
    "2":true
    ... ...
}

缓存页面的wxml（post-detail.wxml）
 <view class='circle-img'>
    根据collected状态的变化来选择性渲染数据
     <image wx:if="{{collected}}" catchtap='onColletionTap' src="图片" />
     <image wx:else catchtap='onColletionTap'  src="图片"/>
 </view>
 
 
缓存页面的js（post-detail.js）
data: {
    currentPostId: Number,
    //设置初始状态为false
    collected:false
  },
  /**
   * 生命周期函数--监听页面加载,当页面初次渲染的时候,判断缓存是否存在
   */
  onLoad: function (options) {
    var postsCollected = wx.getStorageSync('post_Collected');//得到缓存
    //判断缓存是否存在
    if (postsCollected) {//如果存在
      var postCollected1 = postsCollected[postId];//取得当前页面的缓存
      this.setData({
        collected: postCollected1
      })
    }
    else {//如果不存在设置缓存
      var postsCollected = {}
      postsCollected[postId] = false;//设置当前的缓存状态
      wx.setStorageSync('post_Collected', postsCollected)
    }
  }

详情页面触发点击事件

在post-detail.js里面代码如下，点击之后得到缓存，并且取反，再设置缓存动画

onColletionTap: function (event) {
    this.getPostsCollectedAsy()
},
getPostsCollectedAsy: function () {
    var that = this;
    wx.getStorage({
      key: 'post_Collected',
      success: function (res) {
        var postsCollected = res.data;
        var postCollected = postsCollected[that.data.currentPostId];
        postCollected = !postCollected;
        postsCollected[that.data.currentPostId] = postCollected;
        that.showToast(postsCollected, postCollected);
      },
    })
},
showToast: function (postsCollected, postCollected) {
    wx.setStorageSync('post_Collected', postsCollected);
    this.setData({
      collected: postCollected
    })
    wx.showToast({
      title: postCollected ? "收藏成功" : "取消成功",
      icon: 'success',
      duration: 2000
    })
}

未完待续。。。。。。。。。。。。。。。