java框架学习顺序,前端框架设计学习笔记

学习文献：鹅厂— wepy学习汇总wepy官网minUI官方使用手册——阅读结构：1、小程序minUI安装方法2、小程序wxcharts表格实现方式3、wepy的 .wpy文件 基本结构

1、minUI的安装方法：

a、新创建.bat 文件，里面放你所需要用到的插件；一次只能写一个插件名字

b、新建package.json，官网有具体的写法；
c、在所在文件夹安装全局依赖：npm install
d、在所在文件运行创建的文件夹 ： type min_build.bat | cmd

小程序wxcharts表格实现方式：

<template> <view class="g-canvas-box"> <canvas canvas-id="areaCanvas" class="canvas" bindtouchstart="touchHandler"></canvas> </view></template><script>import wepy from 'wepy';import wxCharts from '../../utils/wxcharts-min.js';export default class Wxcharts extends wepy.component { data = { canvasId: 'areaCanvas' } props = { syncCategories: { type: Object, default: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'] }, // 父页面传入，请求url syncSeries: { type: Object, default: [{ name: '成交量1', data: [70, 40, 65, 100, 34, 18], format: function (val) { return val.toFixed(2) + '万'; } },{ name: '成交量2', data: [15, 20, 45, 37, 4, 80], format: function (val) { return val.toFixed(2) + '万'; } }] }, canvasId: String, }; onLoad () { var windowWidth = 320; try { var res = wx.getSystemInfoSync(); windowWidth = res.windowWidth; } catch (e) { console.error('getSystemInfoSync failed!'); } if (!this.data.canvasId) { console.warn('组件需绑定 canvasId 变量，例：<wx-canvas id="mychart-dom-bar" ' + 'canvas-id="mychart-bar" ></wx-canvas>'); return; } new wxCharts({ canvasId: this.data.canvasId, type: 'area', categories: this.data.syncCategories, series: this.data.syncSeries, yAxis: { title: '成交金额 (万元)', format: function (val) { return val + '万'; }, min: 0 }, width: 300, height: 200 }); };}</script><style> .g-canvas-box { padding: 26rpx 0; margin-bottom: 26rpx; background: #fff; } .canvas { width: 100%; height: 350rpx; margin: 0 auto; }</style> target：一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时； currentTarget 始终监听事件者，在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，他不同于target属性。他所指的是当事件遍历DOM时，标识事件的当前目标，他总是引起事件处理程序附加到元素，而不是even.target，他标识事件发生的元素；

在点击的是添加事件元素的子元素时，就用e.currentTarget 来获取父元素的值，其指向的是添加监听事件的对象；否则，用e.target来获取子元素的值，其指向出发事件监听的对象；

3、用id传值进行跳转 <repeat for="{{products}}" key="index" index="index" item="product"> <view class="form-box"> <button class="btn" @tap='naviskipUrl' data-id={{product.id}}></button> </view></repeat> props = { products: {}}methods = { naviskipUrl: function(e) { var id = e.currentTarget.dataset.id var url = '/pages/index/index?id='+ id + "&status=" + this.status; // 小程序带有三种跳转方式 id && wx.navigateTo({ url : url, }) }}

2、hidden = “show()” 与 hide() 的用法 this.show = !this.show - 为全局变量调用，需要在全局( data 或者 props )设置show: false ( Boolean ) 的值，否则会报undefined错 <view class="g-popup-box" hidden="{{!show}}"> <view class="m-item-box"> <view class="item-hd"> <label>恭喜您获得奥斯哥纳</label> <label>100 元优惠券</label> </view> <view class="item-bd"> <label>￥<em>100</em>券</label> <label>满1500可用</label> </view> <view class="item-ft" @tap="navigateUrl" data-url="/pages/member/join"> <label>马上提取</label> </view> </view> // 关闭按钮 <view class="m-img-box" @tap="showPoster"> <image mode="aspectFill" src="/images/icon-close.png" class="imgs"></image> </view></view>// 弹出按钮<view class="g-ticket-box" @tap="showTicket"> <view class="m-item-img"> <image mode="widthFix" src="/images/icon-ticket.png" class="imgs"></image> </view></view> methods = { navigateUrl: function(e) { var url = e.currentTarget.dataset.url; url && wx.navigateTo({ url: url, }) }, // 关闭 showPoster(e) { this.show = !this.show }, // 打开 showTicket(e) { // 局部调用 var that = this that.setData({ show : true }) }, // wepy简写方式 showTicket(e) { var that = this this.show = true },}

— 2018-11-03 —
1、wepy框架下组件的调用

/*调起组件，添加事件 结构 */<template><view class="form-box item-hd"> <button class="btn" @tap="showShare">分享</button></view> <elect /></template><!-- end -->/* 被调起的组件 elect 结构 */<view class="shade-box" hidden="{{!show}}"> <view class="weui-cell"> <view class="weui-cell-bd"></view> <view class="weui-cell-ft" @tap="hide"></view> /* 添加关闭事件 */ </view></view> // 引入组件<script> import wepy from 'wepy'; import elects from '../../components/electList/index' export default class Index extends wepy.page { config = { navigationBarTitleText: '龙**' } components = { elect: elects } methods = { showShare : function() { this.invoke('elect','show'); this.$apply(); } }</script>// --- end ---/* 被调起的组件 elect */export default class Index extends wepy.component { props = { show : Boolean } methods = { show() { this.show = true; } hide() { this.show = false; } } // --- end ---}

1、C# invoke() 方法会顺着控件树向上搜索，直到找到创建控件的那个线程（通常是主线程），然后进入那个线程改变控件的外观，确保不发生线程冲突。

1、样式中需要注意组件与组件的样式不能重名写样式，不然会相互影响 /* 原始结构部分 */<template><view></view></template><script>import wepy from 'wepy';// 引用外部组件，采用驼峰式命名import Panel from '../components/panel';// 声明一个Page页面实例，与声明组件的会不同 ：component / page// export default class MyComponent extends wepy.component {}export default class Index extends wepy.page {config = {navigationBarTitleText: '项目名称'}//可用于页面模板中绑定的数据data = {}onLoad() {}// 事件methods = {}// 声明页面中将要使用到的组件components = { }}</script><style lang="less"></style>

项目循环组件遵循: repeat

// 这里for省略了小程序原生的 wx:<repeat for="{{list}}" key="index" index="index" item="item"></repeat ><script>//wepy改变this绑定数据clickTab: function(e) {this.currentTab= e.currentTarget.dataset.current}</script>

微信小程序调试窗口取消勾选：