小程序模板網(wǎng)

微信小程序?qū)崙?zhàn) - 簡(jiǎn)易記事本

發(fā)布時(shí)間:2018-01-03 09:46 所屬欄目:小程序開發(fā)教程

多項(xiàng)技能,好像也不錯(cuò)。學(xué)習(xí)一下微信小程序。  教程:https://mp.weixin.qq.com/debug/wxadoc/dev/  簡(jiǎn)介:一套用來(lái)開發(fā)在手機(jī)微信上運(yùn)行的app框架,不用安裝  組成:結(jié)構(gòu)文件wxml、樣式文件wxss、js文件   ...

 
 
 

多項(xiàng)技能,好像也不錯(cuò)。學(xué)習(xí)一下微信小程序。

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

  簡(jiǎn)介:一套用來(lái)開發(fā)在手機(jī)微信上運(yùn)行的app框架,不用安裝

  組成:結(jié)構(gòu)文件wxml、樣式文件wxss、js文件

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

  說(shuō)明:支持雙向數(shù)據(jù)綁定、ES6語(yǔ)法,遵循commonjs規(guī)范管理模塊

  首先在教程(https://mp.weixin.qq.com/debug/wxadoc/dev/)中找到工具,然后從“微信開發(fā)者工具”鏈接進(jìn)入,下載開發(fā)者工具,之后安裝。安裝好后,用手機(jī)微信確定登錄后,就可以創(chuàng)建項(xiàng)目了。如何創(chuàng)建可參照簡(jiǎn)易教程。

  簡(jiǎn)易記事本 - 主要功能:

  1. 列表展示

  2. 新增/編輯

  數(shù)據(jù)存儲(chǔ)在storage中

 

簡(jiǎn)易記事本:

目錄結(jié)構(gòu) 列表 新增/編輯

  在目錄結(jié)構(gòu)中的app.json中配置路由及導(dǎo)航條的基本設(shè)置,其中pages數(shù)組中的第一個(gè)就是入口的路由頁(yè)面:

 

		
  1. {
  2. "pages": [
  3. "pages/list/list", // 入口路由頁(yè)面
  4. "pages/add/add"
  5. ],
  6. "window": {
  7. "backgroundTextStyle": "light",
  8. "navigationBarBackgroundColor": "skyblue",
  9. "navigationBarTitleText": "簡(jiǎn)易記事本",
  10. "navigationBarTextStyle": "#fff"
  11. }
  12. }

  下面展示主要代碼:

  list.wxml中的內(nèi)容如下,add.wxml同理,就不展示了。至于wxss和css一樣,也不展示了。

 

		
  1.  
  2. class='page'>
  3.  
  4. scroll-y='true' class='lists'>
  5. wx:for="{{lists}}" wx:key="*this.id">
  6. class="list-i" bindtap="edit" data-id="{{item.id}}">
  7. class="content">{{item.content}}
  8. class='time'>創(chuàng)建時(shí)間:{{item.time}}
  9.  
  10.  
  11.  
  12.  
  13. class='add' bindtap='add'>
  14. src='../../img/edit.png'>
  15.  
  16.  

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

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

 

		
  1. // list.js 初始化列表數(shù)據(jù)
  2. function initData (page) {
  3. var arr = wx.getStorageSync('txt');
  4. if (arr.length) {
  5. arr.forEach((item, i) => {
  6. var t = new Date(Number(item.time));
  7. item.time = util.dateFormate(t);
  8. })
  9. page.setData({
  10. lists: arr
  11. })
  12. }
  13. }
 

		
  1. // add.js 獲取根據(jù)url中的id獲取編輯信息
  2. function getData(id, page) {
  3. var arr = wx.getStorageSync('txt');
  4. if (arr.length) {
  5. arr.forEach((item) => {
  6. if (item.id == id) {
  7. page.setData({
  8. id: item.id,
  9. content: item.content
  10. })
  11. }
  12. })
  13. }
  14. }
  15.  
  16. // 設(shè)置填寫的信息,分編輯、新增
  17. function setValue(page) {
  18. var arr = wx.getStorageSync('txt');
  19. var data = [], flag = true;
  20. if(arr.length) {
  21. arr.forEach(item => {
  22. if(item.id == page.data.id) {
  23. item.time = Date.now();
  24. item.content = page.data.content;
  25. flag = false;
  26. }
  27. data.push(item);
  28. })
  29. }
  30. if (flag) {
  31. data.push(page.data);
  32. }
  33. wx.setStorageSync('txt', data);
  34. }

  小小的展示了以下,^_^

  git項(xiàng)目地址是:https://github.com/ESnail/wx.git



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18360.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢