(微信小程序)二 : 创建一个页面

首先先看一下pages的目录结构吧。

我创建了一个topics页面。3个文件全创建好了之后 我往topics.js添加数据


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/* ---topics.js----*/

Page({

  data:{

      topics: [

      {title:"初始angular"},

      {title:"初始ionic"},

      {title:"初始wechat"},

      ],

  }, 

  onLoad: function () {

    this.data.topics.push({title:"初始 onload "})

    console.log(this.data.topics)

  }

})

 

/* ---topics.js----*/

首先 page({})就不用说了吧 。可以把他看成一个 页面渲染的方法。里面承载我们整个数据与生命周期。这里只是用了onload

首先我 写了死数据 。这里要注意的一点就是 我们的数据一定要放在 data :{ 数据 } 下。可能是为了工整吧。。如果不这样写的话 会在wxml {{ topics }} 中找不到数据。

然后为了测试 onload 是否为初始渲染页面。我让这个数组新增一条数据。


1

2

3

4

5

6

7

/* ---topics.wxml----*/

<view wx:for="{{topics}}" wx:for-item="topic" >

  <text>{{index}}: {{topic.title}}</text>

</view>

 

/* ---topics.wxml----*/

这里 wx:for="{{topics}}" 循环我们data中的topics数据。 wx:for-item="topic"则是我们每个实例 。类似与forEach (如果没有wx:for-item 则默认为item.title)-

写到这里我们有了这个页面。但是毕竟没有把他映射到路由上 我们需要修改 app.json


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/* ---app.json----*/

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs",

    "pages/topics/topics"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor""#fff",

    "navigationBarTitleText""WeChat",

    "navigationBarTextStyle":"black"

  }

}

 

/* ---app.json----*/

我们把这个路径配置到app.json中  这样就可以通过重定向的方式 来指向这个路径了。

这个时候我稍微修改一下index.wxml (注意这只是修改某一段)


1

2

3

4

5

6

7

/* ---page/index/index.wxml----*/

<view bindtap="onTopics" class="usermotto">

    <text class="user-motto">{{motto}}</text>

</view>

/* ---page/index/index.wxml----*/

可以看到我新添加了一个 onTopics 的方法 bindtap类似与click方法

然后我在修改 一下 index.js (注意这只是修改某一段) 在page({ }) 添加一个onTopics方法


1

2

3

4

5

6

7

8

9

10

11

/* ---page/index/index.js----*/

page({

   onTopics : function(){

      wx.navigateTo({

        url: ‘../topics/topics‘

      })

   }

})

/* ---page/index/index.js----*/

以上的跳转方式还有 wx.redirectTo 他会刷新本页面。而 wx.navigateTo 会跳转到另一个页面上是可以后退回去的。

当然 他们都是可以传值的 比如 wx.navigateTo({ url: test?id=1 })

甚至他们还有其他属性 :


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/* ---题外讲解----*/

wx.navigateTo({

      url: ‘String‘,

      success: function(res){

        // 成功后执行

      },

      fail: function() {

        // 失败后执行

      },

      complete: function() {

        // 无论成功或失败都执行

      }

    })

/* ---题外讲解----*/

然后。当我们点击 hello word 会跳转到页面 index.wxml上 这样也验证了 topics.js 的onload确实在数组里添加了一条数据

大功告成。接下来去熟悉熟悉 页面的一些 视图容器。

时间: 2024-10-31 12:17:49

(微信小程序)二 : 创建一个页面的相关文章

谷歌app二次验证码与微信小程序二次验证码对比实测

下面我就跟大家实测一下关于两款验证码的使用对比 NO.1:下载安装 谷歌二次验证码下载方式如下: 1.通过扫描交易所中二维码(目前所有交易所中都是提供下载二维码的) 2.手机应用商店搜索"Google Authenticator"进行下载 微信小程序下载方式如下: 1.进入微信直接搜索"二次验证码"即可 1.谷歌需要去下载app(费流量,有wifi和土豪忽略),微信不需要,直接使用! 2.搜索方面谷歌需要一连串的英文字母,比较复杂这个对我而言就比较难接受了(我是英语

转载【小程序】: 微信小程序开发---应用与页面的生命周期

App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow onHide Function 生命周期函数--监听小程序隐藏 当小程序

微信小程序开发07-列表页面怎么做

接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有70%以上,如果再花一两天时间,便能跟之前工作做的差不多了,今天我们继续实现一个页面列表,便结束这次的学习,后面几天要出差,所以总结性的文章本周未必能出来,静待下周吧. 这里考虑demo复杂度,列表页功能完成度也仅仅完成主功能模块,与真实工作完成度对比60%左右吧,于是我们开始愉快的代码,首先是将我们

基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)

高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城 功能和数据库参考ecshop 服务端api基于Node.js+ThinkJS+MySQL 计划添加基于Vue.js的后台管理系统.PC版.Wap版 GitHub: https://github.com/tumobi/nideshop-mini-program 项目截图 首页 专题 分类 商品列表 商品详情 购物车 订单中心 功能列表 首页 分类首页.分类商品.新品首发.

微信小程序如何创建云函数并安装wx-server-sdk依赖

时间:2020/01/23 步骤 1.在微信开发者工具中云函数所在的文件夹的图标与其他文件夹是不同的,如下(第一个是云函数): 如果需要使一个普通文件变为云函数文件夹,需要在project.config.json(配置文件)中添加一行: "cloudfunctionRoot": "cloudfunctions/", 2.要使用云函数必须先安装node.js,安装后在cmd中输入node -v和npm -v打印版本号就可以知道是否安装成功. 3.需要为云函数安装wx-

微信小程序二维码识别

目前市场上二维码识别的软件或者网站越来越多,可是真正方便,无广告的却少之很少. 于是,自己突发奇想做了一个微信二维码识别的小程序. 包含功能: 1.识别二维码 ①普通二维码 ②条形码 ③只是复制解析出来的数据 2.生成二维码 ①只是从粘贴板生成二维码 软件截图: 体验二维码: 以下为主要代码 index.js // pages/main/index.js var QR = require("../../utils/qrcode.js"); Page({ data: { canvasHi

微信小程序内联h5页面,实现分享

在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件 <web-view wx:if="{{h5url}}" src="{{h5url}}" bindmessage="h5PostMessage" ></web-view> 需要bindmessage事件和postMessage方法 bindmessage:网页

微信小程序H5预览页面框架

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--解决iphone横屏默认放大字体--> <

微信小程序-从组件触发页面任务

组件:第一个参数传入出发方法的名字,第二个参数传入需要传入的参数 this.triggerEvent('timeUpdate',{ currentTime }) 页面:bind:xxx,   xxx为传入的方法  也可以直接bindxxx <l-progress-bar bindtimeUpdate="timeUpdate" bindmusicEnd="next" /> 页面.js timeUpdate(event){ console.log(event

微信小程序使用wxs在页面中调用js函数,颜色值格式转换 rgb和十六进制的转换

<wxs module="filter"> var filter = { numberToFix: function (hex) { // 16进制颜色值的正则 // var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; var reg = getRegExp('^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$','g'); console.log(reg); console.log('结束'); // 把颜色值