微信小程序中页面 wepy 框架布局的应用案例分享集

个人道行不深，存在瑕疵的多多谅解，我会继续学习更新更加有价值的文章分享给大家的，希望大家多多给予指出与改正，咱们一起来共同学习与进步！这篇文章是关于微信小程序学习，还有wepy框架应用。

微信小程序是一种不需要-安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开发人员对小程序的开发的掌握；具体它的热度这里就不多扯了，而咱重点关心的是开发细节。所以今天咱们就一步一步的剖析和认识一下这个小程序：
一 、开发准备工作

1、首先登录微信公众平台  https://mp.weixin.qq.com ，选择小程序( 没有注册过的需要向注册一下公众号 ), 登录后

“设置”-“开发者设置”中，查看微信小程序的 AppID

2、-开发工具

3、新建项目

二、编辑器架构布局理解

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。

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

.wxml后缀的文件是页面结构文件。

app.js是页面全局功能js，可以在pages里的项目中调用全局数据（gloableData）及其页面方法.
 app.wxss里的样式为页面全局样式，但其优先级没有局部页面定义的优先级高。

app.json文件windows的设置项一样为全局设置,pages数组定义新的页面，排前面的为进入小程序的展示页，如下app.json为：

三、开发常用组件及标签分享

微信小程序编辑只能用其自己提供的标签；
view,block标签为块级元素类似p,text标签为行级元素类似span，这三个标签用的最频繁。
表单元素除了H5里的input、button外有新增了像switch、slider、picker,具体详情使用可以看组件api。
页面跳转标签navigator用于项目页面之间的跳转，但不是a链接因为它不能往网页页面跳转（跳转用的是webview标签）
eg: 跳转到新页面
但项目中我更多的是使用事件点击跳转，好处是跳转之前好做判断

还有一个常用的标签是图片标签，与h5里的不同之处是小程序里的图片标签是全拼image,并且是双标签

四、开发常用指令及事件分享

和vue的设计模式一样MVVM  数据渲染{{ data}}
 判断 wx:if，wx:else。eg:
 循环wx:for.
 小程序事件绑定  bindtap 、catchtap
 获取循环序号 data-x

五、本地图片选择、文件上传及服务端数据交互及文件处理

六、本地数据存储操作

wepy框架安装及使用介绍

一、wepy页面及组件结构介绍

wepy页面及组件编辑布局都是同样的三结构

page页面实例  export default class MyPage extends wepy.page {    }

Component组件实例   export default class MyPage extends wepy.component {    }

方法的定义   页面wxml标签的bind、catch事件只能定义在WePY中的methods属性里

组件的引用   注意引用路径  components里注册  模板里使用

循环组件    repeat

看一下app.wpy里的页面组件注册

二、wepy页面组件之间传值与通信

wepy组件之间的通信与传值有三种方式：
  父组件=>子组件 (props,$broadcast)，页面events对象为中转
  子组件=>父组件 ($emit,$invoke) ，页面events对象为中转
  子组件=>子组件 ( $invoke) ，非methods里的方法为中转，同样适用与父组件传向子组件

props方法和vueJS中的props一样，不过这里分为静态传值与动态传值

props动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

注意：下文示例中的twoWay为true时，表示子组件向父组件单向动态传值，而twoWay为false(默认值，可不写)时，则表示子组件不向父组件传值。这是与Vue不一致的地方，而这里之所以仍然使用twoWay，只是为了尽可能保持与Vue在标识符命名上的一致性。

OK，至此咱们的微信小程序的简单使用及了解算是分享完了apache php mysql

以上就是微信小程序中页面 wepy 框架布局的应用案例分享集的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。