【微信小程序】自我社交项目实战-我的精神世界

image

🎉🎉🎉

介绍

用原生的微信小程序代码写了一个自我的社交项目。

这是一个自我社交的项目,没有接口,数据存储在本地,可以理解成一个自嗨的树洞。

一个项目的实战是一个不断自我学习的过程,在这个过程中,遇到了很多问题,将面临怎么样的思考,如何解决。

项目演示

下面是部分页面的截图:

image

image

image

知识点合集

话不多说,上干货,以下所有知识点都基于项目:

创建新页面

创建新页面不需要手动一个文件一个文件的创建,在app.json文件里面,当你每输入一个page,系统就会在pages文件夹下面自动创建好所有的文件+文件夹

  "pages": [
    "pages/message/message",
    "pages/pao/pao"
  ],

底部tab的实现

在app.json文件里面,可以统一配置底部tabbar栏

 "tabBar": {
    "color": "#999",
    "selectedColor": "#444",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/message/message",
        "text": "bibi",
        "iconPath": "assets/tabs/message.png",
        "selectedIconPath": "assets/tabs/message-active.png"
      },
      
      {
        "pagePath": "pages/pao/pao",
        "text": "开炮",
        "iconPath": "assets/tabs/pao.png",
        "selectedIconPath": "assets/tabs/pao-active.png"
      }
    ]
  },

获取微信用户的信息

当我们初始化微信小程序的时候,app.js里面自带了获取微信用户信息的代码:

  wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

如上面代码可以知道,获取到的用户信息已经存储到了app的globalData里面:

globalData: {
    userInfo: null
}

如果我们想要在其他page使用到userInfo

const app = getApp()
const userInfo = app.globalData.userInfo

但是:

值得注意的是this.userInfoReadyCallback

因为获取用户信息是异步的,所以我们并不能保证在渲染页面之前就能够拿到用户信息,所以有了这个callback函数供我们使用,比如在home.js页面,我们在生命周期onload函数里面:

onLoad: function (options) {
    const userInfo = app.globalData.userInfo;
    if (userInfo) {
      this.setData({
        user: userInfo,
        hasUserInfo: true
      })
    } else {
      app.userInfoReadyCallback = res => {
        this.setData({
          user: res.userInfo,
          hasUserInfo: true
        })
      }
    } 
  },

如果在加载页面之前已经有userInfo了,那太好了,直接设置。如果没有就调用userInfoReadyCallback回调函数,设置一下。

getStorageSync

这个项目所有的数据都是存储在本地storage里面的,作为一个对内的项目,这个storage的功能是非常好的。在关闭了小程序重新打开,里面的数据也不会丢失!

getStorage有两个方法

  1. 一个是getStorage
 wx.getStorage({
      key: 'mentions',
      success: (res)=>{
        const storageList = res
      }
    })
  1. 一个是getStorageSync(推荐)
const storageList = wx.getStorageSync('mentions');

选择手机相册的图片/拍照

   wx.chooseImage({
      count: 6, //允许选择的图片数
      sizeType: ['original', 'compressed'], //原始的 / compressed压缩过的
      sourceType: ['album', 'camera'], // 相册 和 相机
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        that.setData({
          imageList: [...that.data.imageList, ...tempFilePaths]
        })
      }
    })

图片被挤压

在我刚开始做的时候,<image>里面的图片压缩自己,填充在了image里面,这很难看,并不是我想要的效果,解决办法是:mode="aspectFill"

<image mode="aspectFill" class="image" src="{{image}}" bindtap="previewImage" data-src="{{image}}" data-list="{{imageList}}"> </image> 

wxml里如何给方法传递参数

data-?="参数"

data-list="{{imageList}}"

wxml:

<image mode="aspectFill" class="image" src="{{image}}" bindtap="previewImage" data-src="{{image}}" data-list="{{imageList}}"> </image> 

js:

previewImage: function(e){
    const list = e.target.dataset.list;
}

system/sdk

当我想要使用接口wx:animate,结果发现不能使用,上网一查原来是版本太低,如何查看版本:

wx.getSystemInfoSync()

得知了自己版本低之后,如何升级版本?

在开发者工具里面顶部有一个按钮:详情,点击之后,选择“本地设置”,调试基本库改一下就好!

image

动画Animation

调好了库,那么wx的animation如何实现呢:

实现一个height从0到100%:


  heightAnimation('#main',0,100) 
  
  heightAnimation: function(id, start, end, callback){
      this.animate(id, [
        {height: `${start}%`},
        {height: `${end}%`}
      ], 500, callback && callback())
    }

实现一个opacity从0到1,从透明变不透明:

 opacityAnimation('#main',0,1)
 
 opacityAnimation: function(id, start, end, callback){
      this.animate(id, [
        {opacity: start},
        {opacity: end}
      ], 500, callback && callback())
    },

如何使用component

从最开始的全量page到最后的component拆分,component拆分可以使代码变得不那么臃肿庞大,修改重构的时候,都能够快速定位到某一部分的代码,提升开发效率:

如果要在某一个父组件里面使用xx component,就要在这个父组件的json文件里面定义一下:

{
  "component": true,
  "usingComponents": {
    "user-des": "./components/user-des/user-des",
    "user-info":"./components/user-info/user-info",
    "user-behaviour":"./components/user-behaviour/user-behaviour"
  }
}

在wxml里面引入方式:

<view class="top">
    <user-info class="info" user="{{user}}" time="{{item.time}}"></user-info>
    <user-behaviour class="behaviour" id="{{item.id}}" list="{{item.images}}" bind:onDelete="onDelete" bind:onUpdate="onUpdate"></user-behaviour>
</view>

父组件与子组件之间的通信传值/传参

1.父组件如何向子组件传值

这是父组件A的代码,向子组件user-info传递了usertime

<view class="top">
    <user-info class="info" user="{{user}}" time="{{item.time}}"></user-info>
    <user-behaviour class="behaviour" id="{{item.id}}" list="{{item.images}}" bind:onDelete="onDelete" bind:onUpdate="onUpdate"></user-behaviour>
</view>

子组件如何接受到父组件传递过来的值:

properties就是保存父组件传递过来的值,data就是组件自己的值。这里和React的props和state特别像!

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    user:{
      type:Object,
      value:{}
    },
    time:{
      type: String,
      value:''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

2.子组件如何向父组件传值

在react里面通过的方式,就是通过函数的回调给父组件传值!

子组件js文件:

onDeleteChild: function(){
    this.triggerEvent('onDeleteFather',{id: this.properties.id});
}

父组件的wxml文件:

<user-behaviour class="behaviour" id="{{item.id}}" list="{{item.images}}" bind:onDeleteFather="onDeleteFatherSelf" bind:onUpdate="onUpdate"></user-behaviour>

触发了父组件自己的onDeleteFatherSelf方法,获取到了子组件传递过来的id:

onDeleteFatherSelf: function(e){
    const id = e.detail.id
}

部分生命周期的执行顺序

在选择图片的时候,弹出手机的相册,这个时候,当前page页面会执行onHide生命周期, 当你关闭了选择图片的框框, 会执行onShow生命周期

生命周期这个东西,光用脑子想还是不行的,很快就忘了,最重要的还是实践!实践!实践!⛽️

wxs:如何在wxml的class里面用函数(传参)

写代码的途中自己有个需求就是,需要在class里面调用函数,并且还可以传递参数,三元表达式已经不能满足我了,于是我找到了一个可以实现的方法,就是wxs:

如何使用wxs:

  1. 新建一个wxs文件,里面写着你的function, 记得导出
  2. 在wxml里面引入
<wxs src="./delete-animation.wxs" module="dm" />

md.导出的方法

页面跳转

【注意⚠️】如果是tab页跳转tab页,navigate是失效的,一定要用switchTab!

【注意⚠️】但是switchTab不能传递参数!navigate可以传递参数!

【注意⚠️】又要用switchTab,又要传递参数,可以把数据存储在app的globalData里!

源码地址:https://github.com/qyang-pp/My-Real-World

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容

  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,338评论 0 9
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,337评论 0 0
  • 配置文件 app.json的配置(全局) { // 用来配置页面的路径 "pages":[ "pages/inde...
    左狐偃阅读 567评论 0 0
  • 01 上周五,我旁边座位的同事很激动的跟大家宣布,他下周就不来上班了,末了还在感叹,终于熬到头了,不停地自言自语(...
    三思吾阅读 485评论 1 15
  • 10月16日 星期二 晴 今天,我被罚“传家宝”了。说起“传家宝”,那可是罗老师发明的惩罚手段,一开始就成...
    合师附小五三班阅读 269评论 0 2