小程序原型搭建

小程序原型搭建

本学期系统分析与设计课程,团队的项目内容是开发一个小型的扫码点餐与结算系统,移动端拟开发一个微信小程序,在此我写一写搭建小程序原型的过程。(基于团队一成员所找的wepy小程序组件化开发框架和所写的ReadMe)

  1. 注册小程序:进入微信公众平台的小程序注册界面,按照流程填写账号的相关信息
    小程序原型搭建_第1张图片

登录后,进入微信公众平台的小程序设置界面,可看到红色框的AppID(小程序平台的唯一ID)
小程序原型搭建_第2张图片
2. 下载、安装微信开发者工具:前往微信公众平台工具下载操作系统对应的IDE安装包,按照步骤完成IDE安装
3. 下载、安装nodejs:按照nodejs菜鸟教程,下载nodejs(版本号高于8.0.0),安装并配置系统的nodejs环境
小程序原型搭建_第3张图片
4. 安装、生成wepy项目

(1)安装wepy命令行工具:输入命令npm install wepy-cli -g,运行后可发现node_global文件夹多了红框的两个文件,以及node_modules目录下(位于node_global目录中)多了wepy-cli文件夹
小程序原型搭建_第4张图片

(2)生成开发实例:进入wepy-cli目录,输入命令wepy init standard myproject,运行后可发现目录下生成myproject项目
小程序原型搭建_第5张图片

(3)安装依赖并实时编译:进入myproject目录,输入命令npm install安装依赖以及命令wepy build –watch启动实时编译,此时小程序的源码已生成在dist目录下
小程序原型搭建_第6张图片
5. 导入项目并预览:打开微信开发者工具并创建新项目,其中项目目录选择步骤4生成的dist目录,AppID输入步骤1第二张图红框的AppID
小程序原型搭建_第7张图片
创建项目之后,可即时在模拟器区域看到小程序的原型,至此原型的搭建基本完成
小程序原型搭建_第8张图片

你可能感兴趣的:(系统分析与设计HW)