4-微信小程序開發(小程序默認頁面函數說明)

2019 年 10 月 10 日
筆記

https://www.cnblogs.com/yangfengwu/p/11601299.html

源碼下載鏈接:

或者

首先說一下,怎麼讓自己的一個項目更改名字成為一個新的項目

然後用軟件導入項目即可

注:如果沒有改文件裏面的那個"projectname": "lesson3", ,用軟件打開的時候,你會發現

這個地方還會顯示lesson2,所以一定要按照上面兩步修改完再導入工程,

如果沒有修改文件裏面那個"projectname": "lesson3" 只修改文件夾名字就導入,會發現後期無論怎麼修改"projectname": "lesson3" 左上角照樣顯示原來的工程名字

你需要,刪除工程文件,關閉微信開發軟件,打開微信開發軟件

然後重新複製一份工程,按照上面的提示修改文件夾名稱和那個文件裏面的工程名字,重新導入即可

本來這節想着做自己的頁面,然後跳轉查看,不過呢!我感覺還是給大家詳細的說一下,小程序當前的頁面

主要講解這裏面的函數

這裏面代碼少些,好講,,,講完以後大家完全可以舉一反三,看另一個文件的代碼

是在注:這個知道就好,不是這節的重點哈…..我只是讓大家知道怎麼進來 logs頁面的

實際上是微信提供的方法注:這個知道就好,不是這節的重點哈…..我只是讓大家知道怎麼進來 logs頁面的

注:這個知道就好,不是這節的重點哈…..我只是讓大家知道怎麼進來 logs頁面的

現在看

每個頁面裏面都有 data:{ 這裏面放各種數據 } 源代碼是放了一個數組

現在看怎麼使用這個數組

//logs.js  const util = require('../../utils/util.js')    Page({    data: {      logs: []    },    onLoad: function () {//頁面加載的時候條用        this.data.logs[1] = "1111111111111";//數組賦值      console.log(this.data.logs[1]);//打印數組的值        this.setData({        logs: (wx.getStorageSync('logs') || []).map(log => {          return util.formatTime(new Date(log))        })      })    }  })

大家可能不習慣 this.XXXX 習慣了 JS 其實可以

data 裏面的數據就是用 this.data.XXXX賦值和調用哈

咱怎麼讓變量顯示在頁面上呢,現在說一下,這個傢伙

<!--logs.wxml-->  <view class="container log-list"><!--布局方式採用container 和 log-list-->      <text>{{qqqqqqqq}}</text><!--加個文本顯示  js文件this.setData({ qqqqqqqq:XXXX }) XXXX就是text的顯示內容-->      <block wx:for="{{logs}}" wx:for-item="log">      <text class="log-item">{{index + 1}}. {{log}}</text>    </block>  </view>

注意凡是顯示的變量用 {{ 放變量名 }} 變量名在 JS中用 this.SetData({ 變量名:XXXXX }) XXXXX就是控件顯示的內容

//logs.js  const util = require('../../utils/util.js')    var GlobalValueStr = "測試頁面的顯示信息1111111111"    Page({    data: {      logs: [], //data裏面定義數據全部按照json格式      str: "測試頁面的顯示信息222222222"    },    onLoad: function () {//頁面加載的時候條用      this.setData({        qqqqqqqq:"顯示一下哈讓我看看"      })        this.setData({        logs: (wx.getStorageSync('logs') || []).map(log => {          return util.formatTime(new Date(log))        })      })    }  })

現在讓它顯示JS變量裏面的值

因為 onLoad 函數裏面有 this.setData 了,所以咱合成一個

現在學一個知識點

這個應該都知道吧,,,如果JS的函數沒有學過,先去百度 JS基礎教程哈……

咱看下一個

不要變了模樣就不認識了

好下一個知識點

但是我要是想給數組每一個數據都開平方呢????

難道

要是數組很大呢…..用 map

使用是數組.map(調用一個帶形參計算函數,形參就是數組的每一個值)

舉個例子: 所有的數據都除以2

當然也可以

再看個知識點

<!--logs.wxml-->  <view class="container log-list"><!--布局方式採用container 和 log-list-->    <!--https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html  默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item  -->    <block wx:for="{{temptemp}}">      <text>{{index + 1}}號下標值: {{item}}</text>    </block>          <block wx:for="{{logs}}" wx:for-item="log">      <text class="log-item">{{index + 1}}. {{log}}</text>    </block>  </view>

//logs.js  const util = require('../../utils/util.js')    var GlobalValueStr = "測試頁面的顯示信息1111111111"  var temp = [36,4,64,100];    function fun(value){    return value/2;  }  var funst = value=>{    return value;  }    Page({    data: {      logs: [], //data裏面定義數據全部按照json格式      str: "測試頁面的顯示信息222222222"    },    onLoad: function () {//頁面加載的時候條用        temp = temp.map( value => { return value/2 } );        console.log( temp );        this.setData({        qqqqqqqq: GlobalValueStr,          temptemp: temp,          logs: (wx.getStorageSync('logs') || []).map(  log => {  return util.formatTime( new Date(log) ) }  )        })    }  })