微信小程序学习日志(一)

原创 2018年04月15日 23:45:35

微信小程序学习日志之工具配置及创建简单页面


1.任务与分工

在这次点餐系统项目中,我和我所在的小程序组的共三个成员主要负责小程序前端的实现。我们针对菜单,点菜清单(结算页面)以及评论三个主要页面进行了初步的实现。

其中我负责的是评论页,需要实现的是展示出全部的客户的评价。

这是我第一次参与小程序的项目,因此简单学习了一些关于微信小程序的前端实现的知识,在此简要记录下自己的经历与收获。


2.开发者工具使用的学习

微信web开发者工具是一款主要面向小程序开发的项目工具。

安装工具

前往开发者工具下载页面,根据自己的操作系统选择下载对应的安装包,这里我选择了win64版本。下载结束后,按照正常步骤提示安装即可。

上手使用

start

安装完成,打开开发者工具,可以看到登录页面是这样的。开始一个项目之前需要填入项目目录,APPID,以及项目名称三样东西。

  • 项目目录:是项目在本地保存的地址,可以选择github上的这个项目的仓库目录,方便以后的修改与提交。
  • AppID:小程序的 AppID 相当于小程序平台的一个身份证,可以到小程序的官方网站进行注册,完成注册后,登录微信公众平台的网站可以查看自己刚刚注册的AppID了。
  • 项目名称:给自己的项目起一个名字,这个可以按照自己的喜好来。

登陆后,可以选择新建一个空项目。这里,我选择直接将github上的项目直接导入(即在登录时将项目目录选择为仓库的本地地址)。

开发者工具的界面纵向分为三大部分:左侧为模拟运行的显示,中间是项目文件目录,右侧是代码区,可以直接修改代码。而左侧的页面也会随着右侧代码的修改进行动态的更新。此外,如果在模拟运行的过程中代码出错,不会显示上次的是正确运行,而会显示错误提示,根据提示修改代码即可。

整体来说,和VS的UWP项目的设计还是挺像的。模拟运行这一点也给实际操作过程带来了很大便利。
与VS不同的一点是,左侧的界面每次都是从微信登录进入的主界面开始的,也就是说需要一些跳转按钮才能手动到达子界面(在vs中,预览图始终显示的是当前代码编辑的页面)

下图是我们的项目文件目录,其中所有的页面被放进了pages文件夹,图片暂时被放在本地目录中。

structure


3.WeUI使用的学习

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI库,包含button、cell、dialog、toast、article、icon等各式元素,是为微信 Web 开发量身设计的,可以令用户的使用感知更加统一。

使用它的另一个主要原因,也是因为其简便性。下面介绍它的使用。

  • 下载
    进入WeUI for 小程序 (weui-wxss)的github页面,选择右侧的“Download zip”,将程序包下载到本地。

  • 导入
    解压后打开,我们需要的“weui-wxss-master\dist\style\”目录下的“weiui.wxss” 文件,它定义了weiui中的各种样式。将weiui.wxss导入我们自己的项目中的方式有两种(两种方法都可以,选择一种即可):

    - 复制:直接将weiui.wxss中的代码复制粘贴到我们项目中的app.wxss文件中;
    
    - 新建:在开发者工具中app.wxss所在的文件夹新建一个名为weiui.wxs的文件(或者直接将weiui.wxss拖入这个文件夹,开发者工具会自动更新你在本地目录中的修改),然后记得在app.wxss文件的头部加入以下代码(声明全局引用'weui.wxss'文件):
    
    @import 'weui.wxss';
  • 运行demo

weiui的demo中展示了各种组件的用法,导入官方的样例demo,你可以看到各种组件的样式,然后选择你要用的组件应用到自己的代码中即可。

这里需要新建一个项目,项目地址就用解压的压缩包的“weui-wxss-master\dist”地址就可以(demo就在里面)。等待demo加载出来后,可以看到:

weiui_demo

点击进入各个组件,可以查看组件各种类型的样式。

  • 移植使用

结合前面的demo,你可能在浏览demo中的组件的过程中,看到了一个你正需要的样式的组件,那么,你只需要找到这个组件对应的xml页面中的代码,将你需要的部分复制粘贴到自己的项目中,首先确定样式的正确性(检查样式有没有少了哪些部分),然后结合自己的实际设计进行修改即可。

总体来说,是十分简单的。


4.评论页的构建

本次任务中,主要完成的是对商家的评价的展示,我列出的需要展示的部分如下:

  • 评论内容:文字内容的展示,评论图片(需要考虑有/无图片两种情况下的排版问题),以及星级评价(可以用更加新颖的小图标代替星)
  • 评论日期:遵从xxxx-xx-xx的格式(展示在评论上方还是下方?)
  • 评论者的信息:昵称(可能需要考虑是否匿名问题),评论论者的头像(采用圆形裁剪还是正方形)
  • 添加新的评论:能能浏览之后想要加入自己的评价。

此上是内容部分,除此之外,需要添加主页到评论页的跳转函数,以及返回函数。
主要用到了带图标。说明项的列表项(weui-cell)以及一些图片、文字的排版摆放位置。


5.结果展示

下面是对最终商家评论页面的展示:

  • 在菜单主页,点击上方的评论按钮,就会跳转到商家评论页:

mainToComment

下面是跳转的结果:

comment


5.思考与改进

这次出现的一个较大问题是图片本地上传,导致小程序体积太大无法上传的问题。

考虑在下一次周期中做出改进,考虑的方案有两个:

  • 将图片保存到腾讯云
  • 将图片传入github的img文件夹。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pomelo_W/article/details/79955218

微信小程序日记(一)

安装好开发环境之后打开,输入appid、项目名、目录,由于目前没有申请appid所有选择无appid,创建完成!大概是4类文件,js、wxml、wxss、json。 js:脚本文件;wxml:页面结构...
  • a61595579
  • a61595579
  • 2017年03月29日 17:29
  • 1044

微信小程序学习篇(一)

Hi! 最新小程序很"火",然后我也就紧跟时代步伐。简单的学习了一下。把笔记记下来,以便自己更好的学习和复习。       言归正传,任何技术学习起来都要先了解一下发展背景:       一、什么是微...
  • liu13722785488
  • liu13722785488
  • 2016年10月14日 16:03
  • 1722

微信小程序开发日志

花了几天时间撸了一遍微信小程序的官方文档,大体了解了小程序开发的基本的过程和涉及到的一些基本的概念。由于我之前搞过一段时间的Android开发(做个手机遥控的智能小车和自动浇花器),所以发现小程序里的...
  • zyembed
  • zyembed
  • 2018年01月17日 10:09
  • 94

微信小程序学习之路(一)

小程序开发简易教程: 获取AppID https://mp.weixin.qq.com – 设置 – 开发者设置中 下载开发者工具 创建项目 a...
  • github_38847071
  • github_38847071
  • 2017年06月14日 17:11
  • 1183

微信小程序开发初级实践篇

微信小程序开发,快捷方便,容易上手,学习成本不高,但是好的程序员必须要经常开发来积攒经验才为上策。在我的微信小程序上手篇中,笔者把微信小程序的demo通读了一遍,可以说收获良多,很多东西只有在自己理解...
  • monsterk1
  • monsterk1
  • 2017年01月11日 14:38
  • 1914

微信小程序的吐血日记(1)

微信小程序的吐血日记 工作需要,开始接触微信小程序,一脸懵逼的踏上挖坑之旅...
  • u013632854
  • u013632854
  • 2017年03月27日 22:47
  • 638

微信小程序日记——高仿知乎日报(下)

该小程序的作者是Oopsguy,我也参与小功能的开发和完善,希望大家能支持一下 本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对h...
  • qq_32198277
  • qq_32198277
  • 2016年10月22日 08:38
  • 2735

微信小程序--后端管理平台业务--日志以及lombok相关

本次开发没有使用lombok,关于它的使用详细使用文献:http://blog.csdn.net/sunsfan/article/details/53542374 这个不知道有没用:http://w...
  • sinat_24048051
  • sinat_24048051
  • 2017年09月04日 15:32
  • 313

微信小程序学习 (一)

这两天在看微信小程序的东东,在此整理一下。首先标明,个人用户无法申请小程序开发资格。什么是微信小程序 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一...
  • lm278858445
  • lm278858445
  • 2016年11月28日 16:04
  • 418

微信小程序学习笔记(1)----学习资料整理

微信小程序破解教程微信小程序只对少部分开放公测名额,大部分人都是没有权限,所以想要体验微信小程序开发还是需要破解一下的,破解方法比较简单,GitHub上早已有了破解教程https://github.c...
  • whzhaochao
  • whzhaochao
  • 2016年09月28日 16:36
  • 3117
收藏助手
不良信息举报
您举报文章:微信小程序学习日志(一)
举报原因:
原因补充:

(最多只允许输入30个字)