2018-05-06 11:12:10 qq_17470165 阅读数 16450

相关文章

微信小程序开发(二)开发之日历打卡小程序发现页

微信小程序开发(三)入门之创建打卡活动

微信小程序开发(四)入门之打卡功能开发


前言

一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序如雨后春笋般出现在我们的视线里。追着这波大浪潮,笔者所在的公司也开始将有些需求转移到微信小程序上。接下来将以几篇文章将最近的一个日历打卡小程序的开发过程以及遇到的问题和大家做个分享。

(一)微信开发者工具

小程序团队推出了自己的开发工具-微信开发者工具,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。论坛上吐槽的文章也是一大堆,存在很多bug,笔者在开发过程中也是被它坑过。笔者是安卓开发者,习惯于这种可视化的编程,所以没有选择Webstrom或者其他开发工具,接下来将介绍微信开发者工具基本功能



   

  1. 机型选择:小程序以IPhone6的屏幕尺寸为设计标准,让UI小姐姐按照IPhone6屏幕尺寸来切图。
  2. 预览界面:写好视图布局后点击编译,视图界面刷新显示
  3. 远程调试:手机端和PC端开发工具联调(非常实用)
  4. 上传代码:上传到腾讯服务器,提交审核必经步骤。可以填写版本号和备注信息
  5. 5-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFiledownloadFile域名。注意:域名小程序要求必须是https 
  6. 控制台:打印输出信息,方便调试
  7. 资源文件:对应项目的文件目录,一般可以在这里进行断点调试
  8. 本地数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
  9. 视图调试:标组件以子父层级结构呈现,方便调试。

以上就是在开发过程中微信开发者工具常用到的功能,微信开发者工具也在不断的完善,为了以后更好的提升开发效率,也需要我们在开发过程中将遇到的问题不断的反馈给小程序团队做优化,希望大家抱着包容的心态。开发过程中大家也可以依照自己的习惯选择其他的开发工具。


(二)小程序框架以及目录结构介绍

    

  •  逻辑层

    小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。逻辑层对应的是js文件,在每个页面的js文件中,系统提供了一系列的方法如:页面生命周期onLoad(),onShow(),onHide(),等,下拉刷新onPullDownRefresh(),页面到底部(上拉加载)onReachBottom()方法,分享功能onShareAppMessage()等。


  • 视图层

    框架的视图层由 wxml  wxss 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 wxml 由小程序提供的组件组成,wxss css 样式。

  • app文件

    app.json 
    文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。页面的json文件一般用来配置当前页面的窗口表现。app.js 用来提供全局变量,如baseUrl。app.wxss 提供全局的css样式

    {
      "pages": [                    //页面的路径(在此处可快捷创建页面)
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {                   //视图窗口
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {                   //底部tab
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": {           //设置是否超时
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }
    
    
  • utils/.json 

    系统提供的工具类,一般编写公共的方法导出方便其他页面调用。

(三)结束语

    本篇文章简单的介绍了微信开发者工具和小程序的框架,微信的开发文档对相关功能的介绍十分的详细。接下来将开始我们的日历打卡小程序开发之旅。


2019-07-06 15:33:39 jlq_diligence 阅读数 1115

微信开发者工具集成git,实现多人协调开发,下面就拿GitHub举例,一一说明。

一、在GitHub创建远程仓库。这里忽略,网上很多。

 

二、在微信开发者工具中配置Git,并实现文件上传。

1.点击开发者工具右上角的【版本管理】,初始化本地仓库。

2,点击设置,添加远程仓库信息和网络认证

 

 3.抓取Git仓库,达到和开发者工具配置的远程仓库同步 

点确认后,就会在【远程】中显示所拉取的源代码,即:

4.接下来将本地master提交的东西进行HEAD重置一下,然后工作区就会出现文件了,首先填写这次提交的信息,填写完成推送到远程

 

大功告成,集成完毕。 

2019-04-17 11:54:39 qq_43793255 阅读数 167

关于微信开发者工具无法输入中文问题

解决方法:

重新启动微信开发者工具即可,亲测有用。(重启电脑效果一样 [手动狗头])

2019-01-19 17:08:03 man_zuo 阅读数 5774

参考教材:《微信小程序开发入门与实践》 雷磊

前言

微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发者工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。
微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注意,Windows版本的仅支持window7及以上版本。
笔者所用的系统为window10 64位

下载与安装

笔者下载的版本是目前的最新版本(2019.01.17更新),点击相应的系统的版本即可下载。
在这里插入图片描述
安装的过程也很简单,双击安装程序,根据提示点击就可以。
在这里插入图片描述
这里可以自定义安装的目录,我安装在了D盘。也可以直接安装默认路径进行安装。
在这里插入图片描述
点击安装后,等待一两分钟后就安装好了。
在这里插入图片描述
运行程序,出现登陆界面,用手机微信扫一扫,然后在手机端确认。就可以登陆了
在这里插入图片描述
在这里插入图片描述
关于微信开发者工具的使用教程,可以查看微信提供的官方用户手册 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

AppID的申请

AppID代表小程序的ID号,必须拥有微信小程序账号才能申请这个ID号。如果没有AppID,小程序就不能在真机上演示(即不能发布到线上给用户使用),只能在微信开发者工具里模拟运行。但是如果你只是想要学习小程序的开发,没有AppID也是可以的,可以通过开发者工具提供的模拟器运行你的小程序
小程序账号申请网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
根据页面提示的要求,填入相应的信息。
在这里插入图片描述
点击注册之后,微信会发一封确认邮件到你注册的邮箱,你需要进入你注册的邮箱点击确认激活

在这里插入图片描述
在这里插入图片描述
点击链接后,会跳到信息认证界面,在主体类型中选择个人,然后在页面中填好你个人的相关信息。

在这里插入图片描述
填好信息,并用微信扫描确认后,就完成了信息认证了。
在这里插入图片描述
点击前往小程序,会自动跳转到小程序的管理界面,在开发里的开发设置里就可以看到你的AppID了
在这里插入图片描述

2019-01-13 22:46:26 E20714076 阅读数 425

提示:提示请使用2.2.3或以上的基础库以使用云能力

 

 

解决办法:

工具栏中点击“详情”:

在下面页面中选择2.2.3以上的版本即可:

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