最新消息:站点添加了一些不太友好的内容,请见谅...

WePY 开发小程序一些小笔记

若思若想 onlyling 715浏览 0评论

WePY 微信小程序

## 全局安装
## wepy 被 cli 工具带入
npm install wepy-cli -g

## 进入文件夹
cd yourdir

## 安装依赖
npm i

## 开发状态
npm run dev

## 如果点击预览,提示文件体积过大
## 先清除所有文件
npm run clean
## 构建上线版本 再预览
npm run build

自定义组件,使用时添加前缀 zd,命名以短横线链接。

自定义属性名以短横线链接,组件内转为驼峰。

基础模板

templatestyle 不多说,主要是 pagecomponent

在 WePY 中,小程序被分为三个实例:小程序实例 App 、页面实例 Page 、组件实例 Component。其中 Page 实例继承自 Component 。各自的声明方式如下

import wepy from 'wepy';
// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}
// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}
// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}

Page 页面实例和 Component 组件实例

import wepy from 'wepy';
// export default class MyPage extends wepy.page {
export default class MyComponent extends wepy.component {
    customData = {}  // 自定义数据 // 例如 cudata = 'aa';

    customFunction () {}  //自定义方法 例如 showData() {}

    onLoad () {}  // 在Page和Component共用的生命周期函数

    onShow () {}  // 只在Page中存在的页面生命周期函数

    config = {};  // 只在Page实例中存在的配置数据,对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性(详见后文介绍)

    watch = {};  // 声明数据watcher(详见后文介绍)

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}

技术选型

WePY

WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。以下是使用 WePY 前后的代码对比与组件化示例。

GitHub仓库

echarts-for-weixin

ECharts 的微信小程序版本。

使用方式参照 demo.wpy,更多案例看仓库代码。

GitHub仓库

候选工具

zanui-weapp

ZanUI-WeApp 是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。

zanui-weapp 可以通过自定义组件的方式与 WePY 搭配干活。

目前智店界面还算简单,暂时没有考虑引入。

关于 cookie

微信小程序中并没有 cookie 接口,在 wx.request 请求中的 header 中带有服务器主动返回的 cookie

在其他接口中,并不会主动把携带的 cookie 返回,于是,在登录操作的时候解析好,存在本地,每次需要的时候去拿。

csrfToken 相关的内容,在每次接口返回的时候,单独存一遍。

最后能够模拟出普通浏览器携带 cookie 的状态。

条形码在线生成

点击访问

其他内容

导航栏上的返回按钮

  • navigate:跳转到新页面,有返回按钮

  • wx.redirect:在当前页打开,则无返回按钮

  • wx.navigateTo:保留当前页面,跳转到应用内的某个页面,有返回按钮

通过 onUnload 监听当前页面点击了左上角的返回箭头。

但,页面一旦使用 switchTab 的操作,当前路由队列都会关闭,触发 onUnload

button 按钮的边框

小程序的边框是用button::after来设置的

button::after{
    border: none;
}

自定义圆角的时候,就不会有阴影了。

wepy BUG

picker-view

低版本的 wepy 使用 picker-view 组件是,value 默认值无法还原,升级版本就好了。

globalData

文档上说

$wxapp:Object: this.$wxapp等同于getApp()

实际操作有出入,翻 issues 得到以下方案

如果当前组件是page,那么this.$parent是$app

如果当前组件是component, 那么this.$parent是父层component,this.$root是顶层的page,所以你可以这么写this.$root.$parent

转载请注明:OnlyLing-WEB前端开发者 » WePY 开发小程序一些小笔记

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址