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

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

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

问题:

 解决:

 

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

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

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

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 阅读数 140
  • 微信小程序实战项目——点餐系统

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

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

上一篇文章中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文件夹下的页面文件,可以发现

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

2017-05-01 16:41:08 y_f_raquelle 阅读数 3537
  • 微信小程序实战项目——点餐系统

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

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

微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html


首先申请一个微信公众开发测试账号:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login


申请后会提供appID和appsecret,你需要在自己的代码中添加接口配置的处理。

但此处URL必须为一个公网地址,且使用80端口,这就涉及到之前讲到的公网映射的方式。通常使用ngrok,注册后获得authtoken并配置,使用ngrok http <port>即可将指定端口映射到公网80端口。

接口配置的java示例:(参考Journey的博客

@WebServlet(urlPatterns = "/wx", name = "wxHouseKeeperServlet")  
public class HouseKeeper extends HttpServlet {  
    public static final String TOKEN = "mzmzo";  
  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        try {  
            // 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数  
            String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)  
            String timestamp = request.getParameter("timestamp");// 时间戳  
            String nonce = request.getParameter("nonce");// 随机数  
            String echostr = request.getParameter("echostr");// 随机字符串  
            PrintWriter out = response.getWriter();  
            // 将token、timestamp、nonce三个参数进行字典序排序  
            String[] params = new String[] { TOKEN, timestamp, nonce };  
            Arrays.sort(params);  
            // 将三个参数字符串拼接成一个字符串进行sha1加密  
            String clearText = params[0] + params[1] + params[2];  
            String algorithm = "SHA-1";  
            String sign = new String(  
                    Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));  
            // 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信  
            if (signature.equals(sign)) {  
                response.getWriter().print(echostr);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }     
}  

此处TOKEN与网页中填写的Token一致即可

接下来配置“网页授权获取用户基本信息


注意填写时不用加http://,只填写域名即可。

完成后扫描下方二维码即可关注自己的公众测试号,网页中会显示关注用户的Openid。

下载微信Web开发工具,即可模拟手机调试


完成登录和绑定后,开发者就可以开始调试微信网页授权,在地址栏直接输入URL

示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

这里appid填写之前注册后得到的,redirect_uri指向自己的公网域名下的url,response_type为code,scope为snsapi_base表示静默授权,state填写uri后的mapping。注意这里的redirect_uri和state可能需要urlencode。








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

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

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

 

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