E企盈小程序营销工具技术服务商 热线:4006-838-530

wepy框架搭建小程序

E企盈小程序直播系统

我们都知道,小程序对组件化开发并不友好,腾讯自己的 团队就搞出了一个wepy框架。我们先看下wepy的介绍;既然说自己是最受欢迎的小程序 框架,我们就来安装使用一下吧;步骤 :1:npm install wepy-cli -d(推荐cnpm。淘宝镜像比较快)2. wepy new myproject(你会发现这句代码会实现不了你项目的 创建)。因为已经改成了:     wpey init standard myproject;3.cd myproject进去项目文件夹4.cnpm install 安装  依赖5.wepy build –watch开启实时编译;然后 就可以看下代码结构 了。├── 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配置可能你看不到components文件,最近应该是改了。用微信开发者工具,打开项目,就可以看到运行的初始结果了。在微信开发者工具中是无法修改wpy文件的由于vscode并没有支持wpy文件的代码高亮显示,你需要先在扩展中下载一个vuter-wepy的插件,显示代码高亮,有利于开发。我们可以清楚的看到:在index.wpy中有:style ;template;script三个标签。是不是和vue的开发风格很像;style lang=”less”/styletemplate  view class=”container”    Hello world  /view/templatescript  import wepy from ‘wepy’  export default class Index extends wepy.page {    config = {      navigationBarTitleText: ‘test’    }    onLoad() {      console.log(‘onLoad’)    }  }/script然而,我们在微信开发者工具中看到的目录结构是这样的:我们不难发现:我们在template中写的结构,对应了index.wxml里面的内容;在style里面写的内容对应到了index.wxss里面;script里面的内容对应了index.json和index.js。嗯,就这样

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » wepy框架搭建小程序
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏