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

第一章:小程序初级入门教程

工具安装

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

下载开发工具

§ 小程序工具起手

此教程选择的工具为 mac 平台版本,没差

  1. 打开安装好的 微信web开发者工具 ,需要用 管理员开发者 的微信账号扫码登录。管理员账号 是上一节第 6 步中注册 appID 时,绑定的微信账号。开发者账号可在上一节第 8 步中的 添加开发者 中设置
  1. 登录成功后,选择 本地小程序项目,然后 添加项目
  1. 如果没有注册 appID,也可以开发小程序项目,但部分功能会受限,比如在手机上预览。在这里,我们已经有了 appID
  1. 添加成功后,我们的项目会在 微信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.jsapp.jsonapp.wxss

  1. app.js 小程序的主入口文件,类似于我们在模块加载器时代(requirejs/seajs)常常会码一个 main.js 来作为程序的启动入口。如果你有接触过 node - express 技术栈,理解起来会更贴切。注意:文件名不可更改 我们可以在 app.js 里面对小程序在不同生命周期段进行处理,设置小程序里面的 全局变量(比如只请求一次公用的数据,让所有的页面都能用)。 微信平台 app.js 说明文档
  2. app.json 小程序的全局配置文件,比如设置小程序有哪几个页面组成(目前是 indexlogs)、窗口表现(背景色等)、设置网络超时时间、设置导航条样式等背景色。注意:该文件不可添加任何注释内容 微信平台 app.json 配置文档
  3. app.wxss 小程序的全局样式文件,在小程序中,所有的样式文件不再是 .css 后缀,全都需要以 .wxss 作为后缀。与传统的 css 样式相比,wxss 支持 @import 样式导入和像素单位自适应。 独立页面中的局部样式,请书写在相对的页面文件夹中,后面会有说明。 微信平台 app.wxss 样式说明文档

小程序的页面文件

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

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

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

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

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

  • 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
    })
  }
})

下期更新内容:小程序初级入门教程-小试牛刀+发布流程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

如何在使用了updatepanel后弹出提示信息

转载:http://www.cnblogs.com/brusehht/archive/2009/03/19/1416802.html

471
来自专栏IMWeb前端团队

thinkjs学习笔记

thinkjs 开始 安装 npm install -g thinkjs-cmd 查看是否安装成功 thinkjs -v 新建项目 mkdir new_dir_...

1956
来自专栏13blog.site

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression

前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题。 本文中涉及的两个异常为我开发时遇到的,可能和你目前所要...

2623
来自专栏静默虚空的博客

[JSP]JSP 简介

1.1 概述 1.1.1 什么是 JSP? JSP 全称是 Java Server Pages,是一种动态网页开发技术。 它与 PHP、ASP、ASP.NET ...

1706
来自专栏练小习的专栏

css制作表单

对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fie...

1755
来自专栏强仔仔

SpringBoot中实现依赖注入功能

今天给大家介绍一下SpringBoot中是如何实现依赖注入的功能。 在以往Spring使用中,依赖注入一般都是通过在Spring的配置文件中添加bean方法实现...

1715
来自专栏WindCoder

基于zepto的微信手机端微场景HTML5页面特效

page处是管理图片的,在改div中添加删除图片及图片中的相关组件,如在div标签为page page-9中添加的Button组件。

431
来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

1887
来自专栏微信小程序开发

你真的了解小程序的自定义编译功能嘛?

微信开发者工具最新的版本里面已经校验了app.json里面的重复pages,之前可以直接把你想要的page放在第一行,默认就会先加载这个page,现在只能通过自...

41610
来自专栏iKcamp

微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支...

19910

扫码关注云+社区