4-微信小程序开发(小程序默认页面函数说明)

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

    })
  }
})

那个  block 只是算是一个空的家伙,其实这家伙算是陪衬.

注意一件事情哈

然后看

最后看

我修改下哈

注意: 他俩才是真爱!!!!

然后接着看

最后看

然后调取打印

还有最后一个,访问APP.JS里面的变量

定义了一些变量

其实访问这里的变量只需要

说的挺多的.....先喝口水.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏二狗的DBA之路

使用pg_repack 回收表体积

对于某些常进行archiver或者 purge操作的表而言,如果我们不定期回收表空间,则表体积会越涨越大。

8610
来自专栏明年我18

VsxHowTo-把Windows Forms Designer作为自己的编辑器(1)

有时候我们想实现一个表单设计器,在这个设计器实现拖动控件、设置属性等功能。VS内置的WinForm Designer无疑是最好的选择,那么,我们怎样才...

7520
来自专栏开发笔记

线性表

- 多个元素的线性表,第一个元素没有前驱,最后一个元素没有后继,其他元素有且仅有一个前驱,一个后继。

7900
来自专栏程序猿讲故事

安装配置ZooKeeper及基本用法

要想学习分布式应用,ZooKeeper是一个绕不过去的基础系统。它为大型分布式计算提供开源的分布式配置服务、同步服务和命名注册。

11310
来自专栏腾讯开源的专栏

腾讯原生小程序框架 OMIX 2.0 发布

? 好的设计只有一种,我们认为 OMIX 2.0 的设计刚刚好。 OMIX 2.0 是 WeStore 的进化版,WeStore 使用的是数据变更前后的 d...

18940
来自专栏SAS程序分享号号号

Macro-Output Query(Edit Check Macro)

愉快的周末又要结束了,繁忙的周一也即将开始!小编今天给大家Share的一个Macro是关于临床数据清理中的一个实用性的Macro,SAS Edit Check ...

7920
来自专栏Lauren的FPGA

解决时序违例就看这篇文档

针对时序收敛,Xilinx提供了一套完备的方法学,也就是基线设计流程,这使得时序收敛变得有章可循,而不再是盲目尝试。同时,借助Vivado强大的分析处理能力、可...

11720
来自专栏二狗的DBA之路

linux下一键编译安装MariaDB10.0.12

对于某些常进行archiver或者 purge操作的表而言,如果我们不定期回收表空间,则表体积会越涨越大。

10920
来自专栏IT大咖说

1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

这是这次系列文章的第一篇,我自己封装了一个用vue实现的拖拽排列卡片组件,并且发布到npm,详细地记录下来了整体制作过程。总共有三篇文章,介绍组件的制作思路和遇...

16120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励