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

本文轉載自查看原文 2019-09-28 22:18 1452 微信小程序/ 微信小程序開發入門篇/ 小程序

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) ) }  )

    })
  }
})