微信小程序 - 實戰小案例 - 簡易記事本

  多項技能,好像也不錯。學習一下微信小程序。css

  教程:https://mp.weixin.qq.com/debug/wxadoc/dev/html

  

  簡介:一套用來開發在手機微信上運行的app框架,不用安裝git

  組成:結構文件wxml、樣式文件wxss、js文件github

  備註:wxml 和html是同樣的,除了部分便籤不一致;wxss和css是同樣的;js同理json

  說明:支持雙向數據綁定、ES6語法,遵循commonjs規範管理模塊小程序

 

  首先在教程(https://mp.weixin.qq.com/debug/wxadoc/dev/)中找到工具,而後從「微信開發者工具」連接進入,下載開發者工具,以後安裝。安裝好後,用手機微信肯定登陸後,就能夠建立項目了。如何建立可參照簡易教程。微信小程序

  簡易記事本 - 主要功能:數組

  1. 列表展現微信

  2. 新增/編輯微信開發

  數據存儲在storage中

 

  簡易記事本:

目錄結構 列表 新增/編輯 
   

 

  

 

  

 

 

 

 

 

 

 

 

 

 

 

 

 

  在目錄結構中的app.json中配置路由及導航條的基本設置,其中pages數組中的第一個就是入口的路由頁面:

{
  "pages": [
    "pages/list/list", // 入口路由頁面
    "pages/add/add"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "skyblue",
    "navigationBarTitleText": "簡易記事本",
    "navigationBarTextStyle": "#fff"
  }
}

  下面展現主要代碼:

  list.wxml中的內容以下,add.wxml同理,就不展現了。至於wxss和css同樣,也不展現了。

<!--pages/list/list.wxml-->
<view class='page'>
  <!-- 每一條文字 -->
  <scroll-view scroll-y='true' class='lists'>
    <block wx:for="{{lists}}" wx:key="*this.id">
      <view class="list-i" bindtap="edit" data-id="{{item.id}}">
        <view class="content">{{item.content}}</view>
        <view class='time'>建立時間:{{item.time}}</view>
      </view>
    </block>
  </scroll-view>
  <!-- 添加一條文字的按鈕 -->
  <view class='add' bindtap='add'>
    <image src='../../img/edit.png'></image>
  </view>
</view>

  設置storage使用:wx.setStorageSync(key, data), 獲取storage數據使用的是wx.getStorageSync(key)。

  備註:還有一個wx.getStorageInfoSync(),這個是獲取storage的信息,而不包含設置的key的具體內容。我第一次就用錯了。

// list.js 初始化列表數據
function initData (page) {
  var arr = wx.getStorageSync('txt');
  if (arr.length) {
    arr.forEach((item, i) => {
      var t = new Date(Number(item.time));
      item.time = util.dateFormate(t);
    })
    page.setData({
      lists: arr
    })
  }
}
// add.js  獲取根據url中的id獲取編輯信息
function getData(id, page) {
  var arr = wx.getStorageSync('txt');
  if (arr.length) {
    arr.forEach((item) => {
      if (item.id == id) {
        page.setData({
          id: item.id,
          content: item.content
        })
      }
    })
  }
}

// 設置填寫的信息,分編輯、新增
function setValue(page) {
  var arr = wx.getStorageSync('txt');
  var data = [], flag = true;
  if(arr.length) {
    arr.forEach(item => {
      if(item.id == page.data.id) {
        item.time = Date.now();
        item.content = page.data.content;
        flag = false;
      }
      data.push(item);
    })
  }
  if (flag) {
    data.push(page.data);
  }
  wx.setStorageSync('txt', data);
}

  小小的展現瞭如下,^_^

  git項目地址是:https://github.com/ESnail/wx.git

相關文章
相關標籤/搜索