wepy小程序入门和项目初始化

前言:

wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚。

这篇写得挺好的:小程序开发之wepy

1.初始化项目

(1)全局安装或者更新wepy命令行工具

npm install wepy-cli -g

(2)在开发目录中生成Demo开发项目

wepy init standard project-name

(3)编译

cd project-name

npm install

wepy build --watch 或者 npm run dev

2.目录结构

├── dist                   微信开发者工具指定的目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules
├── src                    代码编写的目录(该目录为使用WePY后的开发目录)
|   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录(属于完整页面)
|   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
|   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
|   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json           项目的package配置

3.重要提醒

1. 微信开发者工具添加dist目录
2. 微信开发者工具关闭ES6转ES5
3. 运行 wepy build --watch 实时编译

参考文章:小程序开发之wepy

原文地址:https://www.cnblogs.com/basic0001/p/10300226.html

时间: 2024-09-29 22:51:42

wepy小程序入门和项目初始化的相关文章

小程序入门(1)项目结构篇。

项目结构 小程序入门(0)项目创建篇 , 下载开发工具并创建项目. 小程序入门(2)浅析篇 ,了解wxml与wxss的配合使用 小程序进阶(1)豆瓣电影,看文档,复制文档代码基础布局也可以轻松搭建. 在编辑中找到加号!创建button目录. 添加一个外层文件button, 在四个内层文件 js,json , wxml , wxss . 名字与外层文件相同. 创建外层文件,分别在创建内层 js,json,wxml,wxss.这样就生成了一个伪页面,说它是伪页面到后面进行分析. . js:javas

小程序入门(0)项目创建篇

已经创建项目的可以看我另一篇讲解 小程序入门讲解 (1)项目结构篇. 官方下载地址 安装后扫描二维码登入. 添加项目 你应该是没有APPID的 选择无APPID 会缺少一项功能后面讲解(目前只发现一项). 好了项目创建好了,有点过分简单了点是不是,但这页面不是我自己创建的就很不舒服,特别想自己创建一个页面,所以去认识项目的结构,我在另一篇讲解的还算清晰.小程序入门讲解 (1)项目结构篇. 讲一下没有APPID 和 有APPID 的功能缺失在哪里,先看图然后自己做一下对比 目前我还没有发现其他的不

CK2020微信小程序入门与实战 常用组件API开发技巧项目实战

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

微信小程序入门篇

微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客 HTML+CSS 大概知道是干啥的就行 从零开始 微信小程序中就四种类型的文件 js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ------- 类似HTML文件 wxss ------- 类似CSS文件

wepy小程序实现选项卡

先上效果: 本文是基于前面几篇文章: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 使用wepy开发微信小程序商城第三篇:购物车(布局篇) wepy小程序实现列表分页上拉加载(1) wepy小程序实现列表分页上拉加载(2) 正文开始: 1.新建一个需要选项卡的页面 (1)pages下面其他页面复制一份,修改文件名,删掉内容,保留结构.pages/tab.wpy (2)打开app.wpy,config里面添加页面路由 config =

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容 wxml文件引用(include.import) 模版 小程序生命周期 实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到

小程序入门(2)浅析篇

有了小程序入门(0)项目创建篇 || 小程序入门(1)项目结构篇.的基础. 一个页面是由 js 与 wxml和wxss配合形成的,而需要将页面显示出来需要在app.json中配置. 现在我们先来看一下决定页面布局的 wxml 的一些简单使用. 最简单的演示: 一个按钮就出现在了调试界面,(需要先保存 ctrl + s ,在去调试页面点击重启.) 按照这个思路我们有很多控件需要进行深入. 现在来看一下wxml与wxss的配合. 先看效果图: 在来看怎么实现, wxml  ,class为关联wxss

【小程序入门集锦】19,微信小程序个人帐号申请

个人账号与企业帐号相比,缺少支付等功能,与个人订阅号类似. 小程序开放个人开发者申请注册,个人用户可访问微信公众平台,扫码验证个人身份后即可完成小程序帐号申请并进行代码开发. 下面我们就来说说个人小程序的申请流程 1.首先进入微信公众平台 https://mp.weixin.qq.com/ ,第一次使用点击立即注册(注意,以前有公众号的,需要重新注册小程序的这个类别,邮箱也是未注册过的才可以) 2.进入选择注册的账号类型 小程序可以看作是一种特殊的公众号,在微信开放平台的第三方平台那一栏拿它与公

天河微信小程序入门《四》:融会贯通,form表单提交数据库

天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数据库已经是没有什么可写的了.不过既然开篇了就不能太监么,所以还是分享出来给大家.我当时的目的是为了实验api的功能和跟后台数据的通讯存储,所以没有考虑到美观之类的,界面非常丑请大家包涵.一个带form表单的页面在这里定义好自己form表单的元素名称 01 02 03 04 05 06 07 08 09 10