wepy 项目的初始化应用

whjin 发布于2019-08-30 15:54 / 445人阅读

摘要：初始化项目安装脚手架切换至项目目录初始化项目开启实时编译小程序生命周期页面加载一个页面只会调用一次。页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。组件路径，组件对应的方法路由的应用调起提示框

1.初始化wepy项目

安装脚手架

npm install -g wepy-cli

wepy init standard my-project

切换至项目目录

初始化项目 npm install

开启实时编译

wepy build --watch

2.小程序生命周期

onLoad: 页面加载
    一个页面只会调用一次。
    接收页面参数   可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示
    每次打开页面都会调用一次。

onReady: 页面初次渲染完成
    一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onHide: 页面隐藏
    当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
    当redirectTo或navigateBack的时候调用。

3 原生小程序要求app实例必须有3个文件：app.js、app.json、app.wxss，而page页面则一般有4个文件：page.js、page.json、page.wxml、page.wxss

project
└── src
    ├── pages
    |   ├── index.wpy    index 页面逻辑、配置、结构、样式
    |   └── log.wpy      log 页面逻辑、配置、结构、样式
    └──app.wpy

也就是app.wpy 主要是做入口文件，pages是页面集成

import wepy from "wepy";

// 声明一个App小程序实例,小程序入口文件 
export default class MyAPP extends wepy.app {
}

// 声明一个Page页面实例，小程序页面
export default class IndexPage extends wepy.page {
}

// 声明一个Component组件实例，开发小程序组件
export default class MyComponent extends wepy.component {
}

4 组件化。类似VUE组件文件的编写

1.我们需要了解父子组件如何传值属性值可以使用props 来传值。子组件用props来接收值。

Vue.component("blog-post", {
  props: ["title"],
  template: "{{ title }}"
})

new Vue({
  el: "#blog-post-demo",
  data: {
    posts: [
      { id: 1, title: "My journey with Vue" },
      { id: 2, title: "Blogging with Vue" },
      { id: 3, title: "Why Vue is so fun" }
    ]
  }
})

组件的事件，可以使用 $emit 来触发父组件上的方法！

5.在组件上使用 v-model

当用在组件上时，v-model 则会这样：

为了让它正常工作，这个组件内的必须：

 - 将其 value 特性绑定到一个名叫 value 的 prop 上
 - 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛

Vue.component("custom-input", {
  props: ["value"],
  template: `
    
  `
})

在vue里面还提出了动态组件的概念 keep-alive,相当于是保留了当前组件的状态。参考资料

6. 通过插槽分发内容

我理解的就是slot就是dom的插槽，就是把dom元素放在固定的位置。

7 wepy常用API

this.$apply() 动态改变数据，重新渲染。

$invoke("组件路径"，“组件对应的方法”)

路由的应用 this.$root.navigation({url:"....."})

showtoast 调起toast 提示框

idc机房托管超融合服务器项目管理软件的应用轻量应用服务器初始化 wepy 腾讯云轻量应用服务器初始端口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116915.html

wepy 项目的初始化应用

摘要：初始化项目安装脚手架切换至项目目录初始化项目开启实时编译小程序生命周期页面加载一个页面只会调用一次。页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。组件路径，组件对应的方法路由的应用调起提示框 1.初始化wepy项目安装脚手架 npm install -g wepy-cli wepy init standard my-project 切换至项目...

levy9527 2019-08-05 14:26 评论0 收藏0
wepy 项目的初始化应用

摘要：初始化项目安装脚手架切换至项目目录初始化项目开启实时编译小程序生命周期页面加载一个页面只会调用一次。页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。组件路径，组件对应的方法路由的应用调起提示框 1.初始化wepy项目安装脚手架 npm install -g wepy-cli wepy init standard my-project 切换至项目...

mengbo 2019-08-22 18:50 评论0 收藏0
一个Time TodoList实例了解redux在wepy中的使用

摘要：描述了如何把转变成下一个。唯一的要点是当变化时需要返回全新的对象，而不是修改传入的参数。以上是纯的使用，使用起来比较鸡肋，大量被使用在项目中，封装库提供的和可以将和完美结合，使用非常方便。 @subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 wepy-redux-time-todo showImg(ht...

JackJiang 2019-08-23 12:37 评论0 收藏0
一个Time TodoList实例了解redux在wepy中的使用

摘要：描述了如何把转变成下一个。唯一的要点是当变化时需要返回全新的对象，而不是修改传入的参数。以上是纯的使用，使用起来比较鸡肋，大量被使用在项目中，封装库提供的和可以将和完美结合，使用非常方便。 @subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 wepy-redux-time-todo showImg(ht...

zacklee 2019-08-05 15:19 评论0 收藏0
wepy - 一个小程序的组件化开发框架

摘要：主要解决问题开发模式转换在原有的小程序的开发模式下进行再次封装，更贴近于现有框架开发模式。官方代码获取应用实例事件处理函数基于的实现支持组件化开发。根组件，一般都是页面父组件小程序对象子组件列表方法参数返回值说明组件初始化。小程序框架wepy文档 Github地址快速入门项目创建与使用安装wepy 以下安装都通过npm安装安装 wepy 命令行工具。 npm install ...

I_Am 2019-08-20 12:30 评论0 收藏0