报错3.3.3开发界面基本工具介绍(一)-3.3微信开发者

然后完成小程序注册

注册好了之后会给你填写的邮箱发送一个激活小程序的信息

点击下面那个网址，就能够完成小程序的注册了

3.2 微信开发者工具下载

先在微信官方文档，找到工具栏，点击微信开发者工具，根据自己软件下载不同的版本，点击下载即可，本文下载稳定版Windows64位为例

下载完成后点击安装完成即可

用微信扫描二维码就可以完成登录

3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发环境背景设置

我们需要完成的是一个小程序开发的界面，所以点击小程序新建项目版本北风网音乐播放器全程开发，先填写项目名称，目录默认存储在C盘，可以更改目录位置，APPID可以选择注册或者测试号，现在学习可以直接点击测试号即可版本北风网音乐播放器全程开发，或者点击注册完成小程序APPID号注册，本文直接采用的测试号完成新建项目

完成新建项目后会进入以下界面，系统默认黑色背景，方便代码更加清晰

可以在设置里点击外观设置，设置背景颜色、调试器主题颜色、模拟器位置

设置浅色的话，代码颜色不容易区分，建议使用系统默认的深色

3.3.2 小程序开发工具

微信开发者工具分为三个模块：模拟器、调试器、编辑器

模拟器可以实时更新我们所写的，比较人性化的

右上方的编辑器，负责编译写代码的地方

下面属于调试器的内容，有问题就会在下面报错

3.3.3 开发界面基本工具介绍

这个是编写代码的文件夹，每个文件夹的功能都是不同的

这里可以修改调试器的机型、显示比例、字体大小的功能

编译：对模拟器页面重新编译一次；

预览：点击预览会出现一个二维码，可以在手机上观察到自己的开发的小程序，点击自动阅览可以与手机连接自动进入小程序，但是这个二维码只能开发者阅览，在没有发布体验版或正式版时其他用户是不能被观察到的；

真机调试：功能实际上和预览很相似，实现在手机上观察自己开发的小程序，但是会出现一个调试器，打印我们在运行时出现的错误信息的，这个是预览没有的功能；

切后台：能够在模拟器上显示一些小程序主入口、收藏、扫描二维码等很多功能；

清缓存：这个功能的话就是快速清除系统数据、文件、编译、授权、网络、登录状态等信息缓存，可以单个清除也可以全部清除

点击详情里出现接口的基本信息，APPID在上传之前要经过修改才能上传，需要在微信公众平台上的小程序，点击小程序的开发，然后再点击开发设置，把开发者ID复制粘贴进去就生成了APPID号了

点击确定之后你会发现现在的界面有些变化，增加了云开发，测试号按钮被上传按钮替代

pages为页面，index表示首页，utils为公共文件可以存放一些公共文件

app.js是一个入口文件，包括一些必要信息，一定要存在，实现一些交互动效，是我们小程序的逻辑层

app.json是配置项，配置标题名、页面颜色什么的

app.wxss代表css，设置颜色和宽高等一些功能

index.js是逻辑层，所有交互信息都放在这里面

index.json是配置项

index.wxml代表html,没有区别

index.wxss代表css，也是没有区别

大体上，界面上的主要基本功能就已经介绍完毕了。

3.4实现一些小程序入门基本功能 3.4.1 文件夹的基本功能

先介绍logs.json吧，将text内容改为微信授权

点击头像，这里就可以看到变化了

app.json里面包含两个属性pages和window

window下面的是关于界面外观属性进行调整

修改text改为“微信小程序”，保存查看效果，WeChat就作出了改变，效果如下

3.4.2 实现分栏模块化

首先在app.json里输入以下代码

这几个地方是可以修改的，里面内容可以根据自己的需要进行修改，如果不止两个任务栏的话仿照text内容再去进行添加，好像之多只能添加五个，任务栏上的标签可以修改，具体效果如下

这样就完成了分栏的效果

app.json里代码如下所示

{   "pages": [
    "pages/index/index",
    "pages/logs/logs"   ],   "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true   },   "debug": true,   "tabBar": {

    "color": "#444",
    "selectedColor": "#219bf3",
    "backgroundColor": "#e0e0e0",
    "borderStyle": "white",
    "position": "top",
    "list": [
      {
        "text": "工作栏",
        "pagePath": "pages/index/index"
      },
      {
        "text": "查看启动日志",
        "pagePath": "pages/logs/logs"
      }
    ]   },   "sitemapLocation": "sitemap61.json" }

3.4.3 实现登录界面设定

主要是logs.js、logs.wxml和logs.wxss三个代码的配置

logs.js代码

logs.wxml代码如下

<!--pages/login/login.wxml-->
<view class="container"> 
  <view class="login-icon">  
    <image class="login-img" src="/images/logo.png"></image>  
  </view>  
  <view class="login-from">  
  <form bindsubmit="formSubmit" class='form'>
    <view class="myno">
    <!-- 账号 -->
      <view class="weui-cell weui-cell_input">
      <image class="nameImage" src="/images/name.png"></image>
          <!-- <view class="weui-cell__hd">
              <view class="weui-label">账号</view>
          </view> -->
          <view class="weui-cell__bd">
              <input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="请输入账号" />
          </view>
      </view>
    </view>
    <view class="mypwd">
      <!-- 密码 -->

      <view class="weui-cell weui-cell_input">
      <image class="nameImage" src="/images/key.png"></image>
          <!-- <view class="weui-cell__hd">
              <view class="weui-label">密码</view>
          </view> -->
          <view class="weui-cell__bd">
              <input class="weui-input" type="password" name="pwd" bindinput="pwdinput" placeholder="请输入密码" value='{{pwd}}'/>
          </view>
      </view>
    </view>
 
     <!--按钮-->  
    <view class="loginBtnView">  
      <button class="loginBtn" size="{{primarySize}}"  form-type='submit' disabled='{{disabled}}'>登录</button>  
    </view>  
    </form>
  
  </view>  
</view>  

logs.wxss代码如下

/* pages/login/login.wxss */
page{
  height: 100%;
  background-size:100%;
  background-image: url('http://songlijuan.top/bk2.jpg');
}
 
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  /* background-color: #f2f2f2;     */
} 
 
/*登录图片*/
.login-icon{
  flex: none;
  margin: 0 auto;
  margin-top: 200rpx;
}

.login-img{
  width: 220rpx;
  height: 220rpx;
  border-radius: 110rpx;
  opacity: 0.6;
}
 
/*表单内容*/
.login-from {
  margin-top: 90px;
  flex: auto;
  height:100%;
}
 
/* 输入框 */
.myno{
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border:1px solid #ccc;
  border-radius: 50rpx;
 
}
.mypwd{
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border:1px solid #ccc;
  border-radius: 50rpx;
  margin-top: 20rpx;
}
/*按钮*/
.loginBtnView {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
 
.loginBtn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 35px;

  color: #fff;
  background-color:#7e8ef0;
  border: 0.1rpx solid #ccc;
  border-radius: 40rpx;
}
 
 
.nameImage, .keyImage {
  margin-right: 10px;
  width: 14px;
  height: 14px
}

点击保存，然后模拟器面板就能够显示以下界面，然后点击头像就能够进入登录界面

补充一点，新手教程这四个字需要在Index.wxml在如图所示中加入以下代码，然后点击保存就能够实现了，还需添加就如图所示继续添加注释，还是比较容易的

这里大概就完成了小程序开发的一些入门的基础功能吧

3.5上传小程序开发

然后点击上传按钮，会弹出下面界面，填写完版本号和项目备注，完成上传即可

但是需要注意的是一定要先完成APPID的添加，不然没有这个按钮，所以要在小程序开发设置那里复制过来，然后粘贴到APPID上才能完成显示上传按键，直接想上传实现不了

然后进入小程序首页，完成小程序基本信息填写

进行小程序名称、小程序简称、小程序头像、介绍和服务类型填写完成提交才能去正式发布开发的微信小程序。

有个小地方注意一下，小程序头像要求144*144而且大小小于2M以内，但是一般相机的原图都是会大于2M的，不满足要求，所以这里我这里没有采用原图，原图基本都大于2M，只能先进行图片压缩去满足小程序头像要求

填写完个人信息后，然后点击版本发布旁边的前往发布进入开发界面

然后提交版本就好了，点击确认就好了

但是注意一点，提交给微信团队审核要确保功能完整可以正常打开和运行起来，不能是测试版或者是Demo小程序的调试和 预览可在开发者工具上进行的，不然提交之后也会被打回来，要看一下提交平台的具体要求，这要才能确保提交的正确性。

补充一点

小程序体验版是并未上线向公众开放的版本，只是给被授权的开发人员看的，并且支持调试模式。上线的小程序面向公众开放，不支持调试模式。

通过小程序体验版确认小程序无误后提交代码审核，通过后需要开发者手动点击发布，小程序才会发布，成为上线小程序，并面向公众用户提供服务。

所以在审核期间，如果需要给别人分享你的成果就需要进行如下操作了

在小程序中点击成员管理，然后你会看到下面有个成员体验，点击添加就好了，输入微信号完成添加信息，一共可以添加15个，这十五个可以在审核期间可以观看你的小程序，其他人员就不能看到，所以给别人看时需要添加进去才能完成观看。

到这里微信小程序开发基础教程差不多就结束了，入门到此就介绍完毕！