专栏首页Android干货WePY开发小程序(二):项目入口及注册页面、组件

WePY开发小程序(二):项目入口及注册页面、组件

项目目录如图

其中src目录填写的app.wpy文件用于app注册

该app.wpy文件中 <config> 代码块用于注册页面信息 ,如下图表示有一个index的page

一、注册一个新的页面 

注册一个新的页面,只需在src目录下的app.wpy文件中的<config>代码快的pages下新增一个页面,如:

 pages: [
      'pages/index',
      'pages/firPage' // 新增的页面,名为firPage
    ],

同时在src目录下的pages目录新增对应的wpy文件:firPage.wpy

在firPage.wpy中新增代码:

<script>
import wepy from '@wepy/core'

wepy.page({
  // 选项
})
</script>

二、注册一个新的组件

在src目录下的components目录下新增一个文件:comA.wpy

编辑内容:

<!-- 组件 -->
<script>
import wepy from '@wepy/core'

wepy.component({
  // 选项
})
</script>

组件的使用:

在需要引用组件的页面配置中添加组件信息,如需要在 pages/firPage.wpy 页面中新增 comA 组件,则在 pages/firPage.wpy 的 <config> 块中添加如下信息:

<config>
{
  "usingComponents": {
    "comA": "components/comA"
  }
}
</config>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端技术前沿1

    .js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,就相当于html中的css文件。

    达达前端
  • WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序。因此我也将手机充值小...

    Gcaufy
  • 打造小程序组件化开发框架

    这篇主要介绍在使用小程序数月之后,结合自己的开发习惯,总结出一套支持组件化的开发框架。希望对大家使用 WePY 有所帮助。

    Gcaufy
  • 快速入门 WePY 小程序

    WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

    王念博客
  • 小程序升级WePY2踩坑记

    最近有个小程序项目需要迭代,但是迭代任务不多,时间比较充裕。而这个小程序最早是在18年的时候开发的,用的开发框架是 WePY 的 1.7.2 版本,去年也就是 ...

    用户4456933
  • wepy项目的学习

    首页,搜索商品,消息(我的消息),轮播图,签到,换货,特价专区,我要补货,优惠活动,

    达达前端
  • 打造“微信小程序”组件化开发框架

    导语 Bugly 之前发了一篇关于微信小程序的开发经验分享,小伙伴们在公众账号后台问了很多关于小程序开发方面的问题,精神哥在查阅相关内容的时候,发现了龚澄同学自...

    腾讯Bugly
  • 微信小程序WePY开发框架简介

    微信小程序入门门槛低、开发周期短、代码编写灵活、传播速度快等优点让微信小程序迅速火爆,开发者纷纷涌入,任何语言开发者一旦多了,就会有新的框架出来,WePY就是一...

    大公爵
  • 云开发xWePY,快速实现Linux命令查询小程序

    本文作者:Linux 中国开发组组长 白宦成,自由职业者,曾就职于网易杭州研究院,目前专注于云计算技术和理念的布道和分享。

    腾讯开源
  • 小程序开发仿微信界面 DEMO

    在前几篇文章中给大家介绍了WePY 的原理、实践与探究,相信大家对WePY 有一个初步的了解,本篇将讲述基于wepy如何一步步开发出一个仿微信界面的小程序DEM...

    Gcaufy
  • 小程序框架对比 ( WePY / mpvue / Taro )

    众所周知如今市面上端的形态多种多样,手机 Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同...

    Fundebug
  • 微信小程序安装 WePY框架

    我们在做传统的 Web 开发,会使用到许多框架来提升工作效率,比如:Laravel、Yii等,同样我们开发小程序也应该会使用小程序的一些框架,而 WePY则是专...

    hedeqiang
  • WePY-小程序框架设计

    摘要 去年11月初,微信小程序开始公测,小程序是一种新的开放能力,开发者可以一用Web相关技术快速开发小程序。这次分享内容包括:小程序开发基础内容;WePY框架...

    IT大咖说
  • WePY:在质疑中前进

    WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Pro...

    腾讯开源
  • 微信小程序开发入门系列教程

    从今天起,学院君将会花大概半个月左右的时间更新微信小程序项目开发入门系列教程,涵盖小程序申请到基础功能的使用,再到一个完整项目的开发上线,希望通过此教程的学习,...

    学院君
  • 小程序第三方框架对比 ( wepy / mpvue / taro )

         众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同...

    李文杨
  • wepy框架入门

    使用微信开发者工具新建项目,本地开发选择dist目录。 微信开发者工具 --> 项目 --> 关闭ES6转ES5。 本地项目根目录运行wepy build ...

    达达前端
  • 微信小程序组件化开发框架WePY

    版本init新生成的代码包会在根目录包含project.config.json文件

    达达前端
  • 认识WebStorm-小程序框架wepy

    WebStorm是一个功能强大的IDE,适用于JavaScript开发,适合使用Node.js进行复杂的客户端开发和服务器端开发。

    达达前端

扫码关注云+社区

领取腾讯云代金券