iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新版1.0开发者工具初中级教程分享

derek_334892 发布于2019-08-30 13:45 / 2605人阅读

摘要：官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。微信平台说明文档小程序的全局配置文件，比如设置小程序有哪几个页面组成目前是和窗口表现背景色等设置网络超时时间设置导航条样式等背景色。

</>复制代码 
iKcamp官网：http://www.ikcamp.com
访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码

第一章：小程序初级入门教程 工具安装

在上一节第 8 步所展示的页面中，可以点击 开发者工具 直接进入到下载页面，也可以直接访问官网下载地址。然后根据自己的设备选择相应的下载
安装过程不再复述，一路默认。

下载开发工具

§ 小程序工具起手

</>复制代码 
此教程选择的工具为 mac 平台版本，没差

打开安装好的 微信web开发者工具 ，需要用 管理员 或 开发者 的微信账号扫码登录。管理员账号 是上一节第 6 步中注册 appID 时，绑定的微信账号。开发者账号可在上一节第 8 步中的 添加开发者 中设置

登录成功后，选择 本地小程序项目，然后 添加项目

如果没有注册 appID，也可以开发小程序项目，但部分功能会受限，比如在手机上预览。在这里，我们已经有了 appID

添加成功后，我们的项目会在 微信web开发者工具 中自动打开并启动，可以在此工具中对代码进行修改、调试、断点、预览，文件有修改的话，项目会实时更新。

目录说明

项目生成后，会看到如下结构的目录文件：

</>复制代码 
├─ pages/
│   ├─ index/
│       ├─ index.js
│       ├─ index.wxml
│       ├─ index.wxss
│   ├─ logs/
│       ├─ logs.js
│       ├─ logs.json
│       ├─ logs.wxml
│       ├─ logs.wxss
├── utils/             
│   ├─ util.js
├── app.js                  // 必备文件  
├── app.json                // 必备文件
├── app.wxss

先看下最外层的三个文件：app.js 、 app.json 、 app.wxss

app.js
小程序的主入口文件，类似于我们在模块加载器时代（requirejs/seajs）常常会码一个 main.js 来作为程序的启动入口。如果你有接触过 node - express 技术栈，理解起来会更贴切。注意：文件名不可更改

我们可以在 app.js 里面对小程序在不同生命周期段进行处理，设置小程序里面的 全局变量（比如只请求一次公用的数据，让所有的页面都能用）。
微信平台 app.js 说明文档

app.json
小程序的全局配置文件，比如设置小程序有哪几个页面组成（目前是 index 和 logs）、窗口表现（背景色等）、设置网络超时时间、设置导航条样式等背景色。注意：该文件不可添加任何注释内容

微信平台 app.json 配置文档

app.wxss
小程序的全局样式文件，在小程序中，所有的样式文件不再是 .css 后缀，全都需要以 .wxss 作为后缀。与传统的 css 样式相比，wxss 支持 @import 样式导入和像素单位自适应。

独立页面中的局部样式，请书写在相对的页面文件夹中，后面会有说明。
微信平台 app.wxss 样式说明文档

小程序的页面文件

app.json 文件中配置了当前小程序的两个页面 pages/index/index 和 pages/logs/logs，可以看到，其实就是 文件的路径+文件名 组成。如果增加一个页面，需要在参数 pages 中把页面的地址配置进去。

细心的同学可能已经发现一个现象，每个页面文件夹，与里面的文件，名字都一样一样滴。是的，一般情况下，一个完整的页面需要 js 、wxss(css)、wxml(html) 组成。
比如 index 页面，如果需要对 index 页面进行一些独立的配置，需要像 logs 一样，增加 index.json 文件来保存配置信息。

来看下 wxml 文件与 html 文件的区别

</>复制代码 
  
    
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}

传统的 html 文件由各种各样的标签组成，而在 wxml 中，可用的标签元素并不多，可以看到这里涉及到了 view、image、text标签。

view 相当于 div，你可以这么去理解。

image 相当于 img，这个应该都懂了。

text 很明显，用来标注文本的标签，既然是文本，肯定是 行级元素 了。

还有一些内置好的组件标签，自带样式和特性，详见官方文档

页面样式表 index.wxss

作用域只在当前页面生效，它可以覆盖 app.wxss 里面的样式规则。可以看到，与平时我们用的样式文件基本没差：

</>复制代码 
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}

页面脚本文件 index.js

跟 app.js 一样，包含了一个页面的生命周期，声明并处理数据，响应页面交互事件等。

</>复制代码 
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    motto: "Hello World",
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse("button.open-type.getUserInfo")
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: "../logs/logs"
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

</>复制代码 
下期更新内容：小程序初级入门教程－小试牛刀+发布流程

</>复制代码 
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

</>复制代码 
相关文章：
听说 2017 你想写前端？
前端开发者指南（2017）
翻译连载 |《你不知道的JS》姊妹篇 | JavaScript 轻量级函数式编程

iKcamp最新活动

</>复制代码 
报名地址：http://www.huodongxing.com/ev...

GPU云服务器云服务器工具类微信小程序怎么制作微信小程序开发者微信小程序免费开发微信小程序怎样开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115523.html

iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新版1.0开发者工具初中级教程分享

摘要：官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。微信平台说明文档小程序的全局配置文件，比如设置小程序有哪几个页面组成目前是和窗口表现背景色等设置网络超时时间设置导航条样式等背景色。 iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1....

张率功 2019-08-21 17:04 评论0 收藏0
iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新版1.0开发者工具初中级教程分享

摘要：官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。微信平台说明文档小程序的全局配置文件，比如设置小程序有哪几个页面组成目前是和窗口表现背景色等设置网络超时时间设置导航条样式等背景色。 iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1....

laoLiueizo 2019-08-01 17:47 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

hersion 2019-08-01 17:45 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

MRZYD 2019-08-21 17:00 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

李昌杰 2019-08-30 15:53 评论0 收藏0