2018-11-16 17:09:29 kang19940713 阅读数 1455
  • 微信小程序实战项目——点餐系统

    “微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序开发基础知识讲解,重点讲解小程序开发工具,视图层(View)和逻辑层(App Service),组件和API。微信小程序开发教程(第2阶段)——小程序实战项目“点餐系统”。 本课程不限制后端开发语言。JavaEE、.Net、php、node.js技术背景,或没有任何技术背景,只要你会基础的javascript语法,就可以学习。 课程秉承九宝老师讲课一贯风格——“简单”、“高效”。课程节奏紧凑,节奏快,含金量高。要求同学们必须做好课前准备;必须认真完成课后作业。

    11986 人正在学习 去看看 翟东平

1、初始化本地仓库

微信Web开发者工具中点击「版本管理」。由于是新建项目,并没有初始化过Git仓库,所以项目会提示初始化Git仓库,点击「初始化 Git 仓库」,点击「确认」,完成本地仓库的初始化。

这一步骤相当于执行「git init」命令。

2、初始化完成后,我们可以看到本地的仓库和当前的Git状态。下图为微信Web开发者工具初始化后的版本控制面板。

3、配置仓库信息

初始化完成后,依次点击「工作空间」->「设置」->「通用」->「编辑」,编辑在Git中使用的用户名和邮箱。这一步相当于git config命令中的配置操作。

$ git config --global user.name "用户名"
$ git config --global user.email "邮箱"

需要注意的是:此处配置的邮箱名需要和 码云 https://gitee.com 上的邮箱保持一致,才能保证提交后能统计到Git的提交贡献信息。

4、点击微信号开发工具的项目管理---设置--远程--添加

5、 设置在码云上创建的项目的名称和克隆地址,点击确定即可

6、 左侧会出现远程的路径目标

7、 选择网络认证,认证方式为用户名、密码认证,填写在码云上使用的用户名密码即可

8、 推送代码到远程仓库

点击操作面板上的「推送按钮」,在弹出窗口选择「推送到新的远程仓库分支」,名称填写「master」,表示推送到远程仓库的master分支,然后点击「确定」

9 、修改并提交代码

点击开发工具面板的「版本管理」按钮,关闭「版本管理」面板,打开「pages/index/index.wxml」,修改其中内容「获取头像昵称」为「我的第一次修改提交」,保存。

再次切换到「版本管理」面板,可以看到当前本地分支有一个文件等待提交,选中并勾选文件,可以查看当前文件内发生的改动。

 

在下方提交框填写提交的备注信息,点击「提交」,将代码提交到本地仓库主干分支上。提交后,可以在本地仓库分支上查看提交记录。

 

接下去我们再次将代码从本地分支推送到远程仓库。点击操作面板上的「推送按钮」,在弹出窗口选择「推送到一下远程仓库分支」,选择一存在的远程master仓库的master分支,然后点击「确定」。

 

推送完成后,即可在码云对应的仓库主页看到提交的代码变更。

注意事项:当一个小程序多个人共同开发时,在拉取最新的码云上代码的时候,拉取下来到微信开发工具上,开发工具并不能很好的识别并更新本地代码

所以这里我们需要用到,git和tortoiseGit管理工具,

下载下来安装到本地,在本地的工作空间目录生成.git版本库,再进行项目的拉取和推送,码云上的代码会更新到项目的工作空间内,进而更新到微信开发工具内

 

2019-06-02 21:01:55 u014650759 阅读数 145
  • 微信小程序实战项目——点餐系统

    “微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序开发基础知识讲解,重点讲解小程序开发工具,视图层(View)和逻辑层(App Service),组件和API。微信小程序开发教程(第2阶段)——小程序实战项目“点餐系统”。 本课程不限制后端开发语言。JavaEE、.Net、php、node.js技术背景,或没有任何技术背景,只要你会基础的javascript语法,就可以学习。 课程秉承九宝老师讲课一贯风格——“简单”、“高效”。课程节奏紧凑,节奏快,含金量高。要求同学们必须做好课前准备;必须认真完成课后作业。

    11986 人正在学习 去看看 翟东平

上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小程序。

1.机型选择:小程序以IPhone7的屏幕尺寸为设计标准,让UI以IPhone7屏幕尺寸来切图。
2.预览界面:写好视图布局后点击编译,视图界面刷新显示
3.编译:代码更改后刷新编译。
4.预览界面:查看编译后的效果,仅限于登录开发工具的开发者本人可以扫码并预览,其他人无法扫码预览。
5.真机调试:扫描生成的二维码,真机进行调试。
6.资源文件:对应项目的文件目录,一般可以在这里进行断点调试。
7.数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
8.视图代码:标组件以子父层级结构呈现,方便查看调试。
9.9-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFile和downloadFile域名。注意:域名小程序要求必须是https
10.项目信息:展示项目所包含的文件,以及进行相关操作
11.代码区域:进行项目下具体文件的代码编辑

接下来,通过上面打开的项目,可以看到小程序框架以及目录结构,下面开始对代码架构目录做简要介绍:app.js、app.json、app.wxss

  1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。例如上面的界面展示了该代码文件中,数据存储操作,跳转登录页面,以及获取用户信息。
  2. ​app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序的窗口、背景色,配置导航条样式,配置默认标题,添加新的页面后也要在此文件中添加新页面申明。注意该文件不可添加任何注释。
  3. app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。其格式和写法,类似于css,不过是css的一个子集,也就是说有些css写法是不支持的。
  4. project.config.json是小程序的工具配置文件,可以做一些个性化配置,例如界面颜色、编译配置等等。在工具上做的任何配置都会写入到这个文件,当重新安装时,只要载入同一个项目的代码包,开发者工具就会自动配置,通常无需修改。
  5. sitemap.json是用来配置小程序及其页面是否允许被微信索引,当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中,通常无需修改。

这里上面讲解了小程序的项目文件,而小程序的交互是通过页面来进行的,所以同时我们也需要知道,小程序的页面组成,查看page文件夹下的页面文件,可以发现

总结,至此,我们已经大概知道了小程序的开发工具内部区域功能布局,及其项目结构文件介绍。

2019-09-19 15:05:21 github_29021283 阅读数 324
  • 微信小程序实战项目——点餐系统

    “微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序开发基础知识讲解,重点讲解小程序开发工具,视图层(View)和逻辑层(App Service),组件和API。微信小程序开发教程(第2阶段)——小程序实战项目“点餐系统”。 本课程不限制后端开发语言。JavaEE、.Net、php、node.js技术背景,或没有任何技术背景,只要你会基础的javascript语法,就可以学习。 课程秉承九宝老师讲课一贯风格——“简单”、“高效”。课程节奏紧凑,节奏快,含金量高。要求同学们必须做好课前准备;必须认真完成课后作业。

    11986 人正在学习 去看看 翟东平

 

2019-01-24 10:50:06 qq_29384639 阅读数 4685
  • 微信小程序实战项目——点餐系统

    “微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序开发基础知识讲解,重点讲解小程序开发工具,视图层(View)和逻辑层(App Service),组件和API。微信小程序开发教程(第2阶段)——小程序实战项目“点餐系统”。 本课程不限制后端开发语言。JavaEE、.Net、php、node.js技术背景,或没有任何技术背景,只要你会基础的javascript语法,就可以学习。 课程秉承九宝老师讲课一贯风格——“简单”、“高效”。课程节奏紧凑,节奏快,含金量高。要求同学们必须做好课前准备;必须认真完成课后作业。

    11986 人正在学习 去看看 翟东平

问题:

 解决:

 

2019-11-24 16:19:34 weixin_45330741 阅读数 23
  • 微信小程序实战项目——点餐系统

    “微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序开发基础知识讲解,重点讲解小程序开发工具,视图层(View)和逻辑层(App Service),组件和API。微信小程序开发教程(第2阶段)——小程序实战项目“点餐系统”。 本课程不限制后端开发语言。JavaEE、.Net、php、node.js技术背景,或没有任何技术背景,只要你会基础的javascript语法,就可以学习。 课程秉承九宝老师讲课一贯风格——“简单”、“高效”。课程节奏紧凑,节奏快,含金量高。要求同学们必须做好课前准备;必须认真完成课后作业。

    11986 人正在学习 去看看 翟东平

微信小程序项目实战 —— 1.2 开发工具下载

1.2.1 开发公具

1、名称:微信开发者工具;
2、简介:
(1)图标:

在这里插入图片描述

(2)仅支持 Windows 7 及以上版本
3、下载方式:
(1)下载链接:微信开发者工具
(2)公众号后台下载:

( a )登录 微信公众平台(前提是得有公众号);
微信公众平台首页
( b ) 登录进公众号后台后,点击 “ 首页 > 开发 > 开发者工具 > 开发者文档 ”
( c )打开的文档默认为 “ 公众号 ” 文档,需点击左上角下拉列表选择 “ 小程序 ”在这里插入图片描述
在这里插入图片描述
( d )点击 “ 起步 > 安装开发者工具 > 开发者工具下载页面 ”
在这里插入图片描述
( e )点击 “ Stable Build "
在这里插入图片描述
( f )根据自己电脑的操作系统进行下载
在这里插入图片描述

4、创建小程序项目

( a )在登录页,可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试
在这里插入图片描述
( b )登录成功,会显示如下图所示的项目列表。记 得点击 ” 小程序 “,再点击 大 ” + “ 号;
在这里插入图片描述
( c )将之前申请的 APPID 填入 ” APPID “ 框,再选择 ” 不使用后端服务 “ 和 ” JavaScript "
在这里插入图片描述
( d )进入开发者工具 —— 主界面。开发者工具主界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、编辑器、调试器 五大部分
在这里插入图片描述

5、总结

最简单的办法就是,直接点击 微信开发者工具 链接,下载开发工具,再动动手自己玩一下。

没有更多推荐了,返回首页