前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个简单的微信小程序DEMO

一个简单的微信小程序DEMO

作者头像
江米小枣
发布2020-06-15 14:50:39
1.3K0
发布2020-06-15 14:50:39
举报
文章被收录于专栏:云前端

本次DEMO预览

抓取豆瓣的页面,演示基本组件的用法

对于程序猿来说,小程序是什么

张小龙:”不需要下载安装即可使用的应用…应用将无处不在,随时可用,但又无需安装卸载”

  • - 基于微信的封闭生态,又一个 RIA(Rich Internet Applications)轮子
  • - 并非真正的原生,也并非传统意义的H5页面,微信基于js/css/html定义了新的文件格式
  • - 比之基于网页的服务号,多了缓存、录音、保存文件等接近原生的能力,及支付、模版消息等微信的功能
  • - 原理就是用JS调用底层native组件,和React Native非常类似
  • - 微信提供了开发框架、丰富又有限的基本组件及API、兼容性解决方案,和类似React的开发方法

当前阶段小程序的限制

  • - 现阶段不允许分享,不允许外部链接
  • - 无法使用less或者sass之类的预编译
  • - 开发工具和真机表现偶尔会有差异
  • - 有时候代码无故不生效,需要重启才行

规定的目录结构

文件类型

  • - WXML 是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构
  • - WXSS 是一套样式语言,与 CSS 相比扩展了自适应尺寸单位、样式导入等
  • - json文件用来对全局或页面进行配置,决定页面路径、窗口表现、网络超时、底部tab 等
  • - js文件管理具体业务逻辑,并用App()和Page()注册应用和页面,打开选项后可用ES6语法

设计规范和自适应尺寸单位

  • - WXSS(WeiXin Style Sheets)是一套样式语言,具有 CSS 大部分特性,可以看作一套简化版的css
  • - rpx(responsive pixel),规定屏幕宽为750rpx
  • - 设计图要求尺寸为750px,元素尺寸直接写成 [设计图尺寸]rpx
  • - rpx换算px (屏幕宽度/750),以iphone5为例: 1rpx = (320/750)rpx = 0.42px
  • - px换算rpx (750/屏幕宽度),以iphone5为例: 1px = (750/320)rpx = 2.34rpx
  • - 也支持rem(root em),规定屏幕宽度为20rem;1rem = (750/20)rpx
  • - 推荐使用 flex 完成大部分布局
  • - 用 @import "xxx.wxss"; 导入样式
  • - 定义在 app.wxss 中的样式为全局样式,作用于每一个页面
  • - 在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖全局样式

js文件的包管理

  • - 用 require() 或ES6的 import
  • - 用 module.exports = 或ES6的 export default

页面导航

  • 在 app.json 中定义页面入口
  • 用 wx.navigateTo 跳转
  • 限制最多打开5个页面

//跳到目标页,并传递参数 wx.navigateTo({ url: `../video/video?v_url=${url}` }); ... //在目标页接受参数 onLoad(option) { console.log(option.v_url); },

网络请求

wx.request发起的是 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接

wx.request({ url, data: [Object|String], method: 'GET', header: { 'Content-Type': 'text/html; charset=utf-8' }, success: res=>console.log(res.data), fail: [Function], complete: [Function] })

开发工具

  • - 官方开发工具 可以实时编译预览,写代码体验较差
  • - Egret Wing 可以预览单个页面,无法调适

编辑界面:

自动完成:

调试界面:

项目界面:

开发细节

用app.js注册程序

App({ onLaunch: function() { // 生命周期函数--监听小程序初始化 }, onShow: function() { // 生命周期函数--监听小程序显示 }, onHide: function() { // 生命周期函数--监听小程序隐藏 }, xxx: '自定义函数或数据' })

在页面中调用全局的 getApp() 函数,可以获取到小程序实例

用app.json配置全局

{ "pages":[ "pages/movies/movies", "pages/video/video", "pages/movies_later/movies" ], "window":{ "backgroundTextStyle":"dark", "backgroundColor":"#fff", "navigationBarBackgroundColor":"#036bc4", "navigationBarTitleText":"小程序demo-豆瓣电影", "navigationBarTextStyle":"white", "enablePullDownRefresh":"false" }, "tabBar":{ "position": "bottom", "backgroundColor": "#fff", "selectedColor": "#036bc4", "color": "#000", "list": [{ "pagePath": "pages/movies/movies", "text": "正在热映", "selectedIconPath": "img/icon1.gif", "iconPath": "img/icon1.gif" }, { "pagePath": "pages/movies_later/movies", "text": "即将上映", "selectedIconPath": "img/icon2.gif", "iconPath": "img/icon2.gif" }] } }

集中定义网络请求等工具方法

小程序开发中,一般把网络请求、全局工具方法等,集中定义在 utils 文件夹中

视图层模板-.wxml文件

<view class="movies" catchtap="onPageClick"> <view class="page-title" wx:if="{{movies.length}}"> 共有{{movies.length}}部电影正在热映: </view> <scroll-view scroll-y="true" style="height:{{scrollHeight}}px" bindscrolltoupper="onToUpper"> <view class="page-main"> <block wx:for="{{movies}}" wx:for-item="item" wx:key="movie"> <view class="box"> <view class="pic" id="pic_{{item.id}}" catchtap="onGallaryClick"> <image src="{{item.image}}"></image> </view> <view class="info"> <view class="title ellipsis">{{item['data-title']}}</view> <view class="others"> <view class="line ellipsis">评分:{{item['data-score']}}</view> <view class="line ellipsis">演员:{{item['data-actors']}}</view> <view class="line ellipsis">上映:{{item['data-release']}}</view> </view> <view class="btns"> <button type="primary" size="mini" id="btn_{{item.id}}" catchtap="onSummaryClick">简介</button> <button type="default" size="mini" id="play_{{item.id}}" catchtap="onVideoClick">预告片</button> </view></view></view></block></view></scroll-view></view>

  • - view,小程序主要的布局元素,类似于html标签的div
  • - 比之用view去做overflow,scroll-view提供了更为强大的功能和更好的性能
  • - button 按钮等组件基本对应于 weui
  • - 类似于react,动态数据均来自对应 Page 的 data
  • - 条件渲染和循环渲染等由 wx:if wx:for 等属性完成
  • - 事件由 bindxxx 和 catchxxx 指定,后者不冒泡
  • - 没有click事件,而是tap

用.js文件管理页面逻辑

import req from '../../utils/request'; Page({ _cache: [], data: { movies: [], scrollHeight: 0 }, onLoad() { this.fetchData(); }, onShow: function () { wx.getSystemInfo({ success: res=>{ let topH = 60; //顶部区域高度 let rpx = topH*(res.windowWidth/750); //rpx转px 屏幕宽度/750 this.setData({ scrollHeight: parseInt(res.windowHeight - rpx) }); } }); }, fetchData() { if (this._cache.length) { this.setData({movies: this._cache}); return; }; req.get_movies('nowplaying', movies=>{ console.log('movies: ', movies); this._cache = movies; this.setData({movies}) }); }, _eventTS: null, onSummaryClick(e) { if (e.timeStamp === this._eventTS) return; this._eventTS = e.timeStamp; req.get_summary(e.currentTarget.id.replace('btn_', ''), summary=>{ wx.showModal({ title: '简介', content: summary }); }); }, onGallaryClick(e) { if (e.timeStamp === this._eventTS) return; this._eventTS = e.timeStamp; req.get_gallary(e.currentTarget.id.replace('pic_', ''), urls=>{ wx.previewImage({ urls }); }); }, onVideoClick(e) { if (e.timeStamp === this._eventTS) return; this._eventTS = e.timeStamp; req.get_video(e.currentTarget.id.replace('play_', ''), url=>{ console.log('video playing...', url); wx.navigateTo({ url: `../video/video?v_url=${url}` }); }); } });

用.wxss定义局部样式

.page-title { color: rgb(142, 142, 142); font-size: 30rpx; line-height: 60rpx; height: 60rpx; } .page-main { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .box { overflow: hidden; width: 48.5%; display: inline-flex; flex-direction: row; margin-bottom: 15rpx; } ... .info .others .line { align-items: center; width: 200rpx; }

DEMO源码

https://github.com/tonylua/wxapp-doubanmovie-demo

参考资料

  • https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161122
  • http://www.jianshu.com/p/060c6f3dd4e8
  • http://blog.csdn.net/yulianlin/article/details/52621413
  • http://mp.weixin.qq.com/s?__biz=MjM5NzQxMDkwMg==&mid=2655403125&idx=1&sn=09086f186ebbbf843ae41afb52a69a63&chksm=bd68fd4c8a1f745a13b9c3e44eac536db05342da90c8fa40eead911959f00a9e1d3c11b31e80&scene=0#rd
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-12-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 云前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库一体机 TData
数据库一体机 TData 是融合了高性能计算、热插拔闪存、Infiniband 网络、RDMA 远程直接存取数据的数据库解决方案,为用户提供高可用、易扩展、高性能的数据库服务,适用于 OLAP、 OLTP 以及混合负载等各种应用场景下的极限性能需求,支持 Oracle、SQL Server、MySQL 和 PostgreSQL 等各种主流数据库。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档