微信小程序


0.前言

本着做一个万能墙去开发一个小程序,
基本逻辑,前端完成了,删除、回复消息功能还没做。。

然后发现社交功能不对个人主体开放,上线不了只能体验。
到此记,10.24

1.基础

学习过程

  1. 学堂在线相关课程的学习
  2. 微信官方文档的查看
  3. 动手实践,百度

相关网站

基本每个界面都有以下4个文件:wxml , wxss , js , json

部分代码

// 发送消息到云端数据库的代码

const app=getApp()
const db=wx.cloud.database()
//省略其它
  send: function(e) {
    var that=this
    console.log(that.data.detail)
    console.log(app.globalData.openid)
    if (that.data.detail==""){
      wx.showModal({
        title: '提示',
        content: '提交内容不能为空',
        showCancel: false
      })
    }else{
    db.collection('info').add({
      data:{
        content: that.data.detail,
        total_likes: 0,
        face_url: app.globalData.userInfo.avatarUrl,
        send_time: new Date().toString(),
        username: app.globalData.userInfo.nickName
      },
      success:function(res){
        wx.showModal({
          title: '提示',
          content: '恭喜提交成功',
          showCancel: false
        })
      }
    })}
  },
// 从云端数据库获取消息的代码

const db=wx.cloud.database()
Page({
  data: {
    list: []
  },
  onLoad: function(options) {
    var that =this
    db.collection('info').get({
      success: function(res) {
        that.setData({ list: res.data})
      }
    })
  },
})
<!--将消息便于查看的html-->

<scroll-view class='scbg' scroll-y='true'>
<block wx:for="{{list}}" wx:for-item="itemName" wx:for-index="id">
  <view class='box'>
    <view class='firstblock'>
      <image class='touxiang' src='{{itemName.face_url}}'></image>
      <view class='person'>
        <view class='name'>
          <text class='showname'>{{itemName.username}}</text>
        </view>
        <view class='tel'>
          <text class='showtime'>{{itemName.send_time}}</text>
        </view>
      </view>
    </view>
    <view class='secondblock'>
      <text class='content'>{{itemName.content}}</text>
    </view>
    <view class='thirdblock'>
      <image class='like' src='/images/like.png'></image>
      <text class='num'>{{itemName.total_likes}}</text>
    </view>
  </view>
</block>
</scroll-view>

一个导图

2.小结

学习了

  • 微信小程序开发的基本流程,
  • html,css
  • js,json,mongdb数据库,

项目流程
基本最小逻辑实现 --> 基本实现 --> 发展功能

其它
小程序开放的服务类目


文章作者: ╯晓~
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 ╯晓~ !
评论
  目录