wepy 小程序的框架,语法和vue很像。
app.wpy 小程序入口 页面配置注册
<style lang="less">
</style>
<script>
import wepy from 'wepy'
export default class extends wepy.app {
config = {
pages: [
'pages/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
onLaunch() {
console.log('on launch')
}
}
</script>
index.wpy
<style lang="less">
</style>
<template>
<view class="container">
Hello world
</view>
</template>
<script>
import wepy from 'wepy'
export default class Index extends wepy.page {
config = {
navigationBarTitleText: 'test'
}
onLoad() {
console.log('onLoad')
}
}
</script>
快速使用:
npm install @wepy/cli -g
wepy init test_wepy
npm install
npm run dev
运行之后,项目就会生成一个dist目录

用vscode 打开项目,用微信开发者打开项目中的dist文件夹即可,微信开发者工具中不能识别wpy,再dist文件夹中,会把wpy 文件分拆成wxml、js 、wxss、json 文件


这样就可以使用了。具体api看官网即可
注意
1.Wepy中的methods的使用
- methods中只能声明bind,catch事件,不能自定义方法
- 自定义的方法和methods平级
methods={
//bind绑定的跳转页面事件
goto(){
}
},
getRecommendData(){
}
.wepyignore文件种写npm run dev 编译到dist文件种过滤得文件

网友评论