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

相关文章

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

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

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


前言

一直不温不火的微信小程序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-07-25 15:47:42 weixin_38364280 阅读数 325

解决微信开发者工具报错:当前开发者未绑定此AppID,请到小程序后台操作重试

首先要在微信公众平台注册小程序账号,注意与公众号(订阅号)账号区别开来,小程序账号不是公众号账号,登录后小程序账号的界面是这样的:微信公众品台--小程序
然后用点击上图的添加开发者进入到如下界面:添加开发者
邀请登录微信开发者工具的微信 成为该小程序的开发者后就解决该问题了。
要注意的是:
1.区分公众号的AppID与小程序的AppID,他们登录微信开放平台的账号是不一样的,登录后的主界面也是不一样的
2.获取小程序的AppID:
小程序APPID

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

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

 

 

解决办法:

工具栏中点击“详情”:

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

2019-10-26 21:07:50 qq_41386332 阅读数 22

博客概要

     简单分享创建一个微信小程序的步骤+开发工具的主要页面介绍~

创建项目

1.下载工具

     想着手煮饭,自然需要一口锅,下面提供这口“锅”的下载地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.点击打开工具

在这里插入图片描述

3.微信登录

在这里插入图片描述
     打开工具,来到登录页,使用微信扫码登录开发者工具,开发者工具将会根据你使用的这个微信账号的相关信息进行小程序的开发和测试。总之,扫就完了= =

4.登录成功

     成功登录会来到这个页面,如果你已经使用开发者工具编辑过,那么就会和我一样,会呈现出已存在的项目痕迹。在左侧的项目列表中还可以选择公众号网页调试,进入到公众号网页调试模式。

     点击上图红框部分,也就是“新建项目”的区域,当符合以下条件时,就可以在本地创建一个小程序项目了:

  1. 需要一个小程序的AppID;如没有AppID,可以选择申请使用测试号
  2. 登录的微信号需要是该AppID的开发者
  3. 需要选择一个空目录,或者选择的非空目录下存在app.json或者project.config.json。当选择是否在该目录下生成一个简单的项目

     当你填写设置好了一切之后,当当当当当,你就新建好了项目,至此来到“开发者工具”的页面了,下面展开介绍


微信开发者工具页面

在这里插入图片描述

     由上图可知,微信开发者工具的界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。

1.菜单栏

项目
在这里插入图片描述

  • 新建项目:快速新建项目
  • 打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目
  • 查看所有项目:新窗口打开启动页的项目列表页
  • 关闭当前项目:关闭当前项目,回到启动页的项目列表页

文件
在这里插入图片描述

  • 新建文件
  • 保存
  • 保存所有
  • 关闭文件

编辑
在这里插入图片描述

  • 可以查看编辑相关的操作和快捷键

工具

在这里插入图片描述

  • 编译:编译当前小程序项目
  • 刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(⌘) + R
  • 编译配置:可以选择普通编译或自定义编译条件
  • 前后台切换:模拟客户端小程序进入后台运行和返回前台的操作
  • 清除缓存:清除文件缓存、数据缓存、以及授权数据

界面

在这里插入图片描述

  • 控制主界面窗口模块的显示与隐藏

设置

在这里插入图片描述

  • 外观设置:控制编辑器的配色主题、字体、字号、行距
  • 编辑设置:控制文件保存的行为,编辑器的表现
  • 代理设置:选择直连网络、系统代理和手动设置代理
  • 通知设置:设置是否接受某种类型的通知

微信开发者工具

在这里插入图片描述

  • 切换帐号:快速切换登录用户
  • 关于:关于开发者工具
  • 检查更新:检查版本更新
  • 开发者论坛:前往开发者论坛
  • 开发者文档:前往开发者文档
  • 调试:调试开发者工具、调试编辑器;如果遇到疑似开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题
  • 更换开发模式:快速切换公众号网页调试和小程序调试
  • 退出:退出开发者工具

2.工具栏

个人中心

在这里插入图片描述

  • 点击用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息

显示/隐藏

在这里插入图片描述

  • 控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示

工具栏中间

在这里插入图片描述

  • 可以选择普通编译
  • 也可以新建并选择自定义条件进行编译和预览
  • 通过切后台按钮,可以模拟小程序进入后台的情况
  • 提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试

开发辅助功能

在这里插入图片描述

  • 在这里可以上传代码、申请测试、上传腾讯云、查看项目信息

工具栏管理

在这里插入图片描述

  • 在工具栏上点击鼠标右键,可以打开工具栏管理

3.模拟器

在这里插入图片描述

     可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。
开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

4.编辑器

     左侧代码目录,右侧具体编辑代码段

5.调试器

在这里插入图片描述
     各种调试区域,码代码的时候就会知道了= =请务必灵活运用

6.其他

独立窗口

在这里插入图片描述

     点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器

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