游记分享

博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标 1. 编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2. 熟悉git代码管理流程，将源代码上传到到github 3. 在博客园班级中写一篇相应的博文
作业源代码 git@github.com:wfs2018/software-engineering.git
学号 31801131 翁芳胜
院系 浙大城市学院计算分院

项目描述

本项目的灵感来自于小红书和大众点评，年轻人常常在这些平台上发布吃喝玩乐的心得和推荐。假期是时候想出去游玩却难以选择游玩地点。于是想到做一个旅游日记共享平台，可以看他人的游玩经历和心得。从而选择自己喜欢的游玩地点。由于是第一次做小程序，没有相关知识和经验，本项目只完成了首页游记展示，发布，收藏和喜欢的简单前端搭建，后续随着进一步的学习会完善相关功能。

参考：https://github.com/harveyqing/BearDiary.git

项目页面展示







  1. {
  2.   "pages": [
  3.     "pages/list/list",
  4.     "pages/mine/mine",
  5.     "pages/new/new",
  6.     "pages/entry/entry"
  7.   ],
  8.   "window": {
  9.     "backgroundTextStyle": "light",
  10.     "navigationBarBackgroundColor": "#5566aa",
  11.     "navigationBarTitleText": "游记分享",
  12.     "navigationBarTextStyle": "white",
  13.     "backgroundColor": "#eceff4"
  14.   },
  15.   "tabBar": {
  16.     "color": "#858585",
  17.     "selectedColor": "#39b5de",
  18.     "backgroundColor": "#ffffff",
  19.     "borderStyle": "black",
  20.     "list": [
  21.       {
  22.         "pagePath": "pages/list/list",
  23.         "iconPath": "images/icons/mark.png",
  24.         "selectedIconPath": "images/icons/markHL.png",
  25.         "text": "印记"
  26.       },
  27.       {
  28.         "pagePath": "pages/mine/mine",
  29.         "iconPath": "images/icons/mine.png",
  30.         "selectedIconPath": "images/icons/mineHL.png",
  31.         "text": "我的"
  32.       }
  33.     ]
  34.   },
  35.   "debug": true,
  36.   "sitemapLocation": "sitemap.json"
  37. }

各页面代码

首页

wxml文件

  1. <!-- dairy.wxml -->
  3. <template name="content-item">
  4.   <block wx:if="{{content.type == 'TEXT'}}">
  5.     <view style="margin-top:30rpx">
  6.       <text wx:if="{{content.type == 'TEXT'}}" class="text">{{content.content}}</text>
  7.     </view>
  8.   </block>
  9.   <block wx:if="{{content.type == 'IMAGE'}}">
  10.     <image class="media" mode="aspectFill" src="{{content.content}}" bindtap="enterPreviewMode" data-src="{{content.content}}"></image>
  11.     <view style="margin-top: 10rpx">{{content.description}}</view>
  12.   </block>
  13.   <block wx:if="{{content.type == 'VIDEO'}}">
  14.     <video class="media" src="{{content.content}}"></video>
  15.     <view style="margin-top: 10rpx">{{content.description}}</view>
  16.   </block>
  17.   <template is="content-footer" data="{{content}}"></template>
  18. </template>
  20. <!-- 正文footer -->
  21. <template name="content-footer">
  22.   <view class="footer">
  23.     <view class="left">
  24.       <image mode="aspectFit" src="../../images/icons/poi.png"></image>
  25.       <text style="margin-left:10rpx;">{{content.poi.name}}</text>
  26.     </view>
  27.     <view class="right">
  28.       <image mode="aspectFit" src="../../images/icons/comment.png"></image>
  29.       <view>{{content.commentNum}}</view>
  30.     </view>
  31.     <view class="right">
  32.       <image mode="aspectFit" src="../../images/icons/like.png"></image>
  33.       <view>{{content.likeNum}}</view>
  34.     </view>
  35.   </view>
  36. </template>
  38. <view class="container">
  39.   <view class="header" style="#ffffff">
  40.     <!--顶部固定工具栏-->
  41.     <view class="toolbar">
  42.       <image class="item" mode="aspectFit" wx:for="{{toolbar}}" src="{{item}}"></image>
  43.     </view>
  45.     <!--meta信息区-->
  46.     <view class="title">
  47.       <image class="avatar" mode="aspectFit" src="{{diary.meta.avatar}}"> </image>
  48.       <view class="desc">
  49.           <view class="item">{{diary.meta.title}}</view>
  50.           <view class="item">{{diary.meta.meta}}</view>
  51.       </view>
  52.     </view>
  53.   </view>
  55.   <!--正文-->
  56.   <view wx:for="{{diary.list}}" wx:for-item="content" class="content">
  57.     <template is="content-item" data="{{content}}"></template>
  58.   </view>
  60.   <view id="footer">
  61.     <view class="container">
  62.       <view class="item" style="font-size:50rpx;">
  63.         <view style="display:inline-block">游记</view>
  64.         <view style="display:inline-block;margin-left:10rpx;color:#2EA1CA;">分享</view>
  65.       </view>
  66.       <view class="item" style="font-size:24rpx;color:gray">分享旅程，分享心情</view>
  67.     </view>
  68.   </view>
  69. </view>
  71. <!-- 预览模式 -->
  72. <swiper class="swiper-container" duration="400" current="{{previewIndex}}" bindtap="leavePreviewMode" style="display:{{previewMode ? 'block' : 'none'}};">
  73.   <block wx:for="{{mediaList}}" wx:for-item="media">
  74.     <swiper-item>
  75.       <image src="{{media.content}}" mode="aspectFit"></image>
  76.     </swiper-item>
  77.   </block>
  78. </swiper>

Js文件

  1. // entry.js
  3. const toolbar = [
  4.   '../../images/nav/download.png', '../../images/nav/fav.png',
  5.   '../../images/nav/share.png', '../../images/nav/comment.png',
  6. ];
  7. const app = getApp();
  9. Page({
  10.   data: {
  11.     // 当前日志
  12.     diary: undefined,
  14.     // 右上角工具栏
  15.     toolbar: toolbar,
  17.     // 图片预览
  18.     previewMode: false,
  20.     // 当前预览
  21.     previewIndex: 0,
  23.     // 内容列表
  24.     mediaList: [],
  25.   },
  27.   // 加载日记
  28.   getDiary(params) {
  29.     console.log("Loading diary data...", params);
  31.     var id = params["id"], diary;
  32.     app.getDiaryList(list => {
  33.       if (typeof id === 'undefined') {
  34.         diary = list[0];
  35.       } else {
  36.         diary = list[id];
  37.       }
  38.     });
  40.     this.setData({
  41.       diary: diary,
  42.     });
  43.   },
  45.   // 过滤出预览图片列表
  46.   getMediaList() {
  47.     if (typeof this.data.diary !== 'undefined' &&
  48.       this.data.diary.list.length) {
  49.       this.setData({
  50.         mediaList: this.data.diary.list.filter(
  51.           content => content.type === 'IMAGE'),
  52.       })
  53.     }
  54.   },
  56.   // 进入预览
  57.   enterPreviewMode(event) {
  58.     let url = event.target.dataset.src;
  59.     let urls = this.data.mediaList.map(media => media.content);
  60.     let previewIndex = urls.indexOf(url);
  62.     this.setData({previewMode: true, previewIndex});
  63.   },
  65.   // 退出预览
  66.   leavePreviewMode() {
  67.     this.setData({previewMode: false, previewIndex: 0});
  68.   },
  70.   onLoad: function(params) {
  71.     this.getDiary(params);
  72.     this.getMediaList();
  73.   },
  75.   onHide: function() {
  76.   },
  77. })

我的页面

Wxml文件

  1. <!--mine.wxml-->
  3. <template name="tab1">
  4.     <view>
  5.     </view>
  6. </template>
  8. <template name="tab2">
  9.     <view>
  10.     </view>
  11. </template>
  13. <template name="tab3">
  14.     <view>
  15.     </view>
  16. </template>
  18. <template name="tab4">
  19.     <view>
  20.     </view>
  21. </template>
  23. <view>
  24.   <!--全屏对话框-->
  25.   <view class="modal" style="{{modalShowStyle}}">
  26.     <view class="dialog">
  27.       <view class="modal-item" style="display:flex;justify-content:center;align-items:center;">
  28.       请输入日记标题
  29.       </view>
  30.       <view class="modal-item" style="margin:0 auto;width:90%;">
  31.         <input type="text" bindinput="titleInput" style="background-color:white;border-radius:2px;" value="{{diaryTitle}}" placeholder="请输入日记标题"></input>
  32.       </view>
  33.       <view class="modal-button" style="width:100%">
  34.         <view style="color:green;border-right:1px solid #E5E7ED;" bindtap="touchAddNew">确定</view>
  35.         <view bindtap="touchCancel">取消</view>
  36.       </view>
  37.     </view>
  38.   </view>
  40.   <view class="header">
  41.     <view class="profile">
  42.       <image class="avatar" mode="aspectFit" src="{{userInfo.avatar}}"></image>
  43.       <view class="description">
  44.         <view class="item">
  45.           <view style="margin-right:5px">{{userInfo.nickname}}</view>
  46.           <view>{{userInfo.sex}}</view>
  47.         </view>
  48.         <view class="item">{{userInfo.meta}}</view>
  49.       </view>
  50.       <image class="add" mode="aspectFill" src="../../images/icons/add.png" bindtap="touchAdd"></image>
  51.     </view>
  53.     <view class="tablist">
  54.       <view wx:for="{{tabs}}" wx:for-index="idx" class="tab" bindtap="touchTab" style="{{item.extraStyle}}" id="{{idx}}">
  55.         <view class="content" style="color:{{highLightIndex == idx ? '#54BFE2' : ''}};">
  56.           <image class="image" mode="aspectFit" src="{{highLightIndex == idx ? item.iconActive : item.icon}}"></image>
  57.           <view style="margin-top:2px;">{{item.title}}</view>
  58.         </view>
  59.       </view>
  60.     </view>
  61.   </view>
  63.     <template is="{{currentTab}}"></template>
  64. </view>

Js

  1. // mine.js
  3. var iconPath = "../../images/icons/"
  4. var tabs = [
  5.     {
  6.         "icon": iconPath + "mark.png",
  7.         "iconActive": iconPath + "markHL.png",
  8.         "title": "日记",
  9.         "extraStyle": "",
  10.     },
  11.     {
  12.         "icon": iconPath + "collect.png",
  13.         "iconActive": iconPath + "collectHL.png",
  14.         "title": "收藏",
  15.         "extraStyle": "",
  16.     },
  17.     {
  18.         "icon": iconPath + "like.png",
  19.         "iconActive": iconPath + "likeHL.png",
  20.         "title": "喜欢",
  21.         "extraStyle": "",
  22.     },
  23.     {
  24.         "icon": iconPath + "more.png",
  25.         "iconActive": iconPath + "moreHL.png",
  26.         "title": "更多",
  27.         "extraStyle": "border:none;",
  28.     },
  29. ]
  30. var userInfo = {
  31.     avatar: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3049066004,1582117064&fm=26&gp=0.jpg",
  32.     nickname: "wfs",
  33.     sex: "♂",  // 0, male; 1, female
  34.     meta: '10篇日记',
  35. }
  37. Page({
  39.     // data
  40.     data: {
  41.         // 展示的tab标签
  42.         tabs: tabs,
  44.         // 当前选中的标签
  45.         currentTab: "tab1",
  47.         // 高亮的标签索引
  48.         highLightIndex: "0",
  50.         // 模态对话框样式
  51.         modalShowStyle: "",
  53.         // 待新建的日记标题
  54.         diaryTitle: "",
  56.         // TODO 用户信息
  57.         userInfo: userInfo,
  58.     },
  60.     // 隐藏模态框
  61.     hideModal() {
  62.         this.setData({modalShowStyle: ""});
  63.     },
  65.     // 清除日记标题
  66.     clearTitle() {
  67.         this.setData({diaryTitle: ""});
  68.     },
  70.     onShow: function() {
  71.         this.hideModal();
  72.         this.clearTitle();
  73.     },
  75.     // 点击tab项事件
  76.     touchTab: function(event){
  77.         var tabIndex = parseInt(event.currentTarget.id);
  78.         var template = "tab" + (tabIndex + 1).toString();
  80.         this.setData({
  81.             currentTab: template,
  82.             highLightIndex: tabIndex.toString()
  83.         }
  84.         );
  85.     },
  87.     // 新建日记事件
  88.     touchAdd: function (event) {
  89.         this.setData({
  90.             modalShowStyle: "opacity:1;pointer-events:auto;"
  91.         })
  92.     },
  94.     // 新建日记
  95.     touchAddNew: function(event) {
  96.         this.hideModal();
  98.         wx.navigateTo({
  99.             url: "../new/new?title=" + this.data.diaryTitle,
  100.         });
  101.     },
  103.     // 取消标题输入
  104.     touchCancel: function(event) {
  105.         this.hideModal();
  106.         this.clearTitle();
  107.     }, 
  109.     // 标题输入事件
  110.     titleInput: function(event) {
  111.         this.setData({
  112.             diaryTitle: event.detail.value,
  113.         })
  114.     }
  115. })

新建日记页面

  1. <!--new.wxml-->
  3. <template name="common">
  4.   <scroll-view class="container" scroll-y="true">
  5.     <view class="common-container">
  6.       <view class="item-group" wx:for="{{layoutList}}" wx:for-item="group">
  7.         <block wx:for="{{group}}" wx:for-item="item">
  8.           <block wx:if="{{item.type == 'TEXT'}}">
  9.             <view class="album-item content-text">
  10.               <view>{{item.content}}</view>
  11.             </view>
  12.           </block>
  13.           <block wx:elif="{{item.type == 'IMAGE'}}">
  14.             <image src="{{item.content}}" class="album-item" mode="aspectFill"></image>
  15.           </block>
  16.           <block wx:elif="{{item.type == 'VIDEO'}}">
  17.             <video class="album-item" src="{{item.content}}"></video>
  18.           </block>
  19.         </block>
  20.       </view>
  21.     </view>
  22.   </scroll-view>
  24.   <view class="tabbar" style="display:{{showTab ? 'flex' : 'none'}};">
  25.     <view class="item" bindtap="inputTouch">
  26.       <image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image>
  27.     </view>
  28.     <view class="item" bindtap="mediaTouch">
  29.       <image class="icon" mode="aspectFit" src="../../images/tabbar/image.png"></image>
  30.     </view>
  31.     <view class="item">
  32.       <image class="icon" mode="aspectFit" src="../../images/tabbar/more.png"></image>
  33.     </view>
  34.   </view>
  36.   <action-sheet hidden="{{mediaActionSheetHidden}}" bindchange="mediaActionSheetChange">
  37.     <block wx:for-items="{{mediaActionSheetItems}}" wx:for-index="id">
  38.       <action-sheet-item class="action-item" bindtap="{{mediaActionSheetBinds[id]}}">
  39.         {{item}}
  40.       </action-sheet-item>
  41.     </block>
  42.     <action-sheet-cancel class='action-cacel'>取消</action-sheet-cancel>
  43.   </action-sheet>
  44. </template>
  46. <template name="inputText">
  47.   <view class="input-container">
  48.     <view style="height:47rpx" wx:for="{{inputStatus.lines}}" wx:for-index="idx">
  49.       <input type="text" data-index="{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == inputStatus.row ? true : false}}" bindfocus="focusInput"/>
  50.     </view>
  51.   </view>
  52.   <view class="tabbar">
  53.     <view class="item" style="width:50%" bindtap="inputCancel">
  54.       <image class="icon" mode="aspectFit" src="../../images/tabbar/cancel.png"></image>
  55.     </view>
  56.     <view class="item" style="width:50%" bindtap="inputDone">
  57.       <image class="icon" mode="aspectFit" src="../../images/tabbar/ok.png"></image>
  58.     </view>
  59.   </view>
  60. </template>
  62. <view style="width:100%;height:100%">
  63.   <block wx:if="{{showMode == 'common'}}">
  64.     <template is="{{showMode}}" data="{{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds, layoutList: layoutList}}"></template>
  65.   </block>
  66.   <block wx:if="{{showMode == 'inputText'}}">
  67.     <template is="{{showMode}}" data="{{inputStatus}}"></template>
  68.   </block>
  69.   <loading hidden="{{!showLoading}}" bindchange="hideLoading">
  70.     {{loadingMessage}}
  71.   </loading>
  72. </view>

Js

  1. // new.js
  2. // TODO 并不是所有非中文字符宽度都为中文字符宽度一半，需特殊处理
  3. // TODO 由于文本框聚焦存在bug，故编辑模式待实现
  5. const input = require('../../utils/input');
  6. const config = require('../../config');
  7. const geo = require('../../services/geo');
  8. const util = require('../../utils/util');
  10. const RESOLUTION = 750;  // 微信规定屏幕宽度为750rpx
  11. const MARGIN = 10;  // 写字面板左右margin
  12. const ROW_CHARS = Math.floor((RESOLUTION - 2 * MARGIN) / config.input.charWidth);
  13. const MAX_CHAR = 1000;  // 最多输1000字符
  15. // 内容布局
  16. const layoutColumnSize = 3;
  18. // 日记内容类型
  19. const TEXT = 'TEXT';
  20. const IMAGE = 'IMAGE';
  21. const VIDEO = 'VIDEO';
  23. const mediaActionSheetItems = ['拍照', '选择照片', '选择视频'];
  24. const mediaActionSheetBinds = ['chooseImage', 'chooseImage', 'chooseVideo'];
  26. var app = getApp();
  28. Page({
  30.   data: {
  31.     // 日记对象
  32.     diary: {
  33.       meta: {},
  34.       list: [],
  35.     },
  37.     // 日记内容布局列表（2x2矩阵）
  38.     layoutList: [],
  40.     // 是否显示loading
  41.     showLoading: false,
  43.     // loading提示语
  44.     loadingMessage: '',
  46.     // 页面所处模式
  47.     showMode: 'common',
  49.     // 输入框状态对象
  50.     inputStatus: {
  51.       row: 0,
  52.       column: 0,
  53.       lines: [''],
  54.       mode: 'INPUT',
  55.       auto: false,  // 是否有自动换行
  56.     },
  58.     // 当前位置信息
  59.     poi: null,
  61.     // 点击`图片`tab的action-sheet
  62.     mediaActionSheetHidden: true,
  64.     // 多媒体文件插入action-sheet
  65.     mediaActionSheetItems: mediaActionSheetItems,
  67.     // 多媒体文件插入项点击事件
  68.     mediaActionSheetBinds: mediaActionSheetBinds,
  70.     // 是否显示底部tab栏
  71.     showTab: true,
  72.   },
  74.   // 显示底部tab
  75.   showTab() {
  76.     this.setData({showTab: true});
  77.   },
  79.   // 隐藏底部tab
  80.   hideTab() {
  81.     this.setData({showTab: false});
  82.   },
  84.   // 显示loading提示
  85.   showLoading(loadingMessage) {
  86.     this.setData({showLoading: true, loadingMessage});
  87.   },
  89.   // 隐藏loading提示
  90.   hideLoading() {
  91.     this.setData({showLoading: false, loadingMessage: ''});
  92.   },
  94.   // 数据初始化
  95.   init() {
  96.     this.getPoi();
  97.     this.setMeta();
  98.   },
  100.   // 设置日记数据
  101.   setDiary(diary) {
  102.     let layout = util.listToMatrix(diary.list, layoutColumnSize);
  103.     this.setData({diary: diary, layoutList: layout});
  104.     this.saveDiary(diary);
  105.   },
  107.   // 保存日记
  108.   // TODO sync to server
  109.   saveDiary(diary) {
  110.     const key = config.storage.diaryListKey;
  112.     app.getLocalDiaries(diaries => {
  113.       diaries[diary.meta.title] = diary;
  114.       wx.setStorage({key: key, data: diaries});
  115.     })
  116.   },
  118.   // 页面初始化
  119.   onLoad: function(options) {
  120.     if (options) {
  121.       let title = options.title;
  122.       if (title) {this.setData({
  123.         'diary.meta.title': title,
  124.         'diary.meta.create_time': util.formatTime(new Date()),
  125.         'diary.meta.cover': ''
  126.       });}
  127.     }
  129.     this.init();
  130.   },
  132.   // 页面渲染完成
  133.   onReady: function(){
  134.     wx.setNavigationBarTitle({title: '编辑日记'});
  135.   },
  137.   onShow:function(){
  138.     // 页面显示
  139.   },
  141.   onHide:function(){
  142.     // 页面隐藏
  143.   },
  145.   onUnload:function(){
  146.     // 页面关闭
  147.     console.log('页面跳转中...');
  148.   },
  150.   // 清除正在输入文本
  151.   clearInput() {
  152.     this.setData({inputStatus: {
  153.       row: 0,
  154.       common: 0,
  155.       lines: [''],
  156.       mode: 'INPUT',
  157.       auto: false,
  158.     }});
  159.   },
  161.   // 结束文本输入
  162.   inputDone() {
  163.     let text = this.data.inputStatus.lines.join('\n');
  164.     let diary = this.data.diary;
  166.     if (text) {
  167.       diary.list.push(this.makeContent(TEXT, text, ''));
  168.       this.setDiary(diary);
  169.     }
  171.     this.inputCancel();
  172.   },
  174.   // 进入文本编辑模式
  175.   inputTouch(event) {
  176.     this.setData({showMode: 'inputText'});
  177.   },
  179.   // 取消文本编辑
  180.   inputCancel() {
  181.     this.setData({showMode: 'common'});
  182.     this.clearInput();
  183.   },
  185.   // 文本输入
  186.   textInput(event) {
  187.     console.log(event);
  188.     let context = event.detail;
  190.     // 输入模式
  191.     if (this.data.inputStatus.mode === 'INPUT') {
  192.       if (context.value.length != context.cursor) {
  193.         console.log('用户输入中...');
  194.       } else {
  195.         let text = context.value;
  196.         let len = input.strlen(text);
  197.         let lines = this.data.inputStatus.lines;
  198.         let row = this.data.inputStatus.row;
  199.         let [extra, extra_index] = [[['']], 0];
  200.         let hasNewLine = false;
  201.         console.log('当前文本长度: ' + len);
  203.         // 当前输入长度超过规定长度
  204.         if (len >= ROW_CHARS) {
  205.           // TODO 此处方案不完善
  206.           // 一次输入最好不超过两行
  207.           hasNewLine = true;
  208.           while (input.strlen(text) > ROW_CHARS) {
  209.             let last = text[text.length - 1];
  211.             if (input.strlen(extra[extra_index] + last) > ROW_CHARS) {
  212.               extra_index += 1;
  213.               extra[extra_index] = [''];
  214.             }
  216.             extra[extra_index].unshift(last);
  217.             text = text.slice(0, -1);
  218.           }
  219.       }
  221.       lines[lines.length - 1] = text;
  222.       if (hasNewLine) {
  223.         extra.reverse().forEach((element, index, array) => {
  224.           lines.push(element.join(''));
  225.           row += 1;
  226.         });
  227.       }
  229.       let inputStatus = {
  230.         lines: lines,
  231.         row: row,
  232.         mode: 'INPUT',
  233.         auto: true,  // // 自动换行的则处于输入模式
  234.       };
  235. 列表
  236. wxml
  238. <scroll-view scroll-y="true">
  239.   <view wx:for="{{diaries}}" wx:for-index="idx" class="item-container" bindtap="showDetail" id="{{idx}}">
  240.     <image mode="aspectFit" src="{{item.meta.cover}}" class="cover"></image>
  241.     <view class="desc">
  242.       <view class="left">
  243.         <view style="font-size:32rpx;margin:10rpx 0;">{{item.meta.title}}</view>
  244.         <view style="font-size:24rpx;color:darkgray">{{item.meta.meta}}</view>
  245.       </view>
  246.       <view class="right">
  247.         <image mode="aspectFit" src="{{item.meta.avatar}}"></image>
  248.         <text style="font-size:24rpx;margin-top:10rpx;color:darkgray">{{item.meta.nickName}}</text>
  249.       </view>
  250.     </view>
  251.   </view>
  252. </scroll-view>

JS

  1. const config = require("../../config");
  3. var app = getApp();
  5. Page({
  7.   data: {
  8.     // 日记列表
  9.     // TODO 从server端拉取
  10.     diaries: null,
  12.     // 是否显示loading
  13.     showLoading: false,
  15.     // loading提示语
  16.     loadingMessage: '',
  17.   },
  19.   /**
  20.    * 生命周期函数--监听页面加载
  21.    */
  22.   onLoad() {
  23.     this.getDiaries();
  24.   },
  26.   /**
  27.    * 获取日记列表
  28.    */
  29.   getDiaries() {
  30.     var that = this;
  31.     app.getDiaryList(list => {
  32.       that.setData({diaries: list});
  33.     })
  34.   },
  36.   // 查看详情
  37.   showDetail(event) {
  38.     wx.navigateTo({
  39.       url: '../entry/entry?id=' + event.currentTarget.id,
  40.     });
  41.   }
  42.   })

总结

这是第一次编写小程序，刚刚听到作业的时候很震惊一周要做一个小程序。从头开始学习html，css知识的同时，去参考完整的demo。一句一句的理解，调试。几天下来对小程序的结构有了了解。在做小程序的时候，也遇到了一些困难，在搜素引擎和同学们的帮助下也都解决了。虽然最后做的很粗糙，但是在这个过程中，基本上完成了小程序的入门，也知道了怎么去解决遇到的问题。这次的作业也让我明白，在开发方面还有很多需要学习的知识。需要更加努力

微信小程序-游记分享(无后台）的更多相关文章

  1. mpvue开发微信小程序，分享按钮报错：`Cannot read property 'apply' of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  2. 微信小程序绘制分享图

    微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...

  3. （一）校园信息通微信小程序从前端到后台整和笔记

    前段时间接触了微信小程序,现在回过头来做一些笔记. 先上效果图 后台数据管理界面(PHP) 校园信息通微信小程序前端界面 下面先简单的说一下怎样部署一个微信小程序 首先是前端 微信小程序有它专门的开发 ...

  4. 微信小程序-实现分享（带参数）

    微信小程序分享功能的实现方法有两种: 第一种 在page.js中实现onShareAppMessage,便可在小程序右上角选择分享该页面 onShareAppMessage: function () ...

  5. （一）微信小程序之模拟调用后台接口踩过的坑

    如下图标记的三个点 在调试过程中出现问题,特此记录. 1. 之前在浏览器测试接口习惯省略 http:// ,是因为浏览器默认有一个检测,在你输入的网址前面加http://,如果有就不加. 然而在微信小 ...

  6. 微信小程序，请求php后台返回json数据多出隐藏字符问题

    这几天在做一个微信小程序注册登录页面的时候碰到一个问题,就是使用wx.request api的时候success中返回的JSON数据前面会多出空白字符,后面网上查了一下是说php bom头问题(详细介 ...

  7. 微信小程序商城 带java后台源码

    微信小程序商城(Java版) 演示地址 账号:admin 密码:admin 小程序体验码: 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 myb ...

  8. 微信小程序全局设置分享内容

    微信小程序每个页面都可以在onShareAppMessage中设置分享内容,如果想要全局设置成一样的分享内容如何设置呢? 在app.js中新增以下方法: //重写分享方法 overShare: fun ...

  9. 微信小程序之分享功能

    说到分享 大家都会想到手机右上角点击不就分享了么?对的没错,那样是分享转发的是小程序  而不是指定的某个页面,所以自己动手丰衣足食,自己写一个转发功能被, 其实也没那么可怕,主要参考的是微信小程序AP ...

随机推荐

  1. Python-变量、变量作用域、垃圾回收机制原理-global nonlocal

    变量实现原理决定了Python使用的垃圾回收机制为变量引用计数,当这个对象引用计数为0时候,则会自动执行__del__函数回收资源, del方法只是把变量指向的对象引用计数减一而已并删除这个变量 表达 ...

  2. spring-boot-route（二）读取配置文件的几种方式

    Spring Boot提供了两种格式的配置文件,分别是properties 和 yml.Spring Boot最大的特点就是自动化配置,如果我们想修改自动化配置的默认值,就可以通过配置文件来指定自己服 ...

  3. CF538B Quasi Binary 思维题

    题目描述 给出一个数 \(n\),你需要将 \(n\) 写成若干个数的和,其中每个数的十进制表示中仅包含\(0\)和\(1\). 问最少需要多少个数 输入输出格式 输入格式: 一行 一个数 \(n(1 ...

  4. 在 Visual Studio 中创建一个简单的 C# 控制台应用程序

    转载:https://blog.csdn.net/qq_43994242/article/details/87260824 快速入门:使用 Visual Studio 创建第一个 C# 控制台应用 h ...

  5. Python 中 pip 工具的安装与使用

    pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 目前如果你在 python.org 下载最新版本的安装包,则是已经自带了该工具. Python 2 ...

  6. 多测师讲解自动化 _rf自动化需要总结的问题（2）_高级讲师肖sir

    1.口述整个自动化环境搭建的过程.以及环境搭建需要哪些工具包以及对应的工具包的作用?2.RF框架的原理?常见的功能?3.公司自动化测试的流程?1.自动化需求的评审2.自动化场景的选择3.自动化工具的选 ...

  7. Rust之路（4）——所有权

    [未经书面同意,严禁转载] -- 2020-10-14 -- 所有权是Rust的重中之重(这口气咋像高中数学老师 WTF......). 所有权是指的对内存实际存储的数据的访问权(包括读取和修改),在 ...

  8. 三门峡6378.7939(薇)xiaojie:三门峡哪里有xiaomei

    三门峡哪里有小姐服务大保健[微信:6378.7939倩儿小妹[三门峡叫小姐服务√o服务微信:6378.7939倩儿小妹[三门峡叫小姐服务][十微信:6378.7939倩儿小妹][三门峡叫小姐包夜服务] ...

  9. Android HandlerThread 详解

    概述 HandlerThread 相信大家都比较熟悉了,从名字上看是一个带有 Handler 消息循环机制的一个线程,比一般的线程多了消息循环的机制,可以说是Handler + Thread 的结合, ...

  10. xuexi

    1.内存的编址方法就是内存地址与内存单元格一一对应且永久绑定.计算机的cpu只认识内存地址,不关心内存单元格的位置和内容.通过硬件的设计来达到通过内存地址找到内存单元格. 2.内存的编址是以字节为单位 ...