注册账号与安装开发工具

官网:mp.weixin.qq.com/cgi-bin/wx 官网记录了详细的注册步骤与安装工具的下载,跟随脚本即可

创建项目

在这里插入图片描述 AppID为开发->开发管理->开发设置 点击“确定”项目就创建成功~

文件结构

在这里插入图片描述

小程序文件结构与传统web对比

传统web	微信小程序
HTML	WXML
CSS	WXSS
Javascript	Javascript
配置:无	JSON

新建文件夹

只需要修改app.json配置信息即可在这里插入图片描述加一句这个自动生成文件夹根据pages内的配置信息的上下顺序来决定当前显示的界面

全局配置

参考文档:developers.weixin.qq.com/miniprogram…

Window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

在这里插入图片描述

TabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

List数量必须是2~5之间在这里插入图片描述

组件

官网:developers.weixin.qq.com/miniprogram…

Button

使用button获取用户信息

index.wxml

<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    <!-- 添加两个按钮 -->
    <button type="primary" open-type="getUserInfo" bindgetuserinfo="mylogin">获取用户信息</button>
    <button type="warn" bindtap="getUserProfile">询问获取</button>
  </view>

index.js

 mylogin(e){
    console.log("test login");
    console.log(e.detail.userInfo);
  }

效果图

点击第一个按钮成功得到在这里插入图片描述点击第二个按钮进行询问点击允许成功得到....

微信小程序入门完结~

微信小程序开发01(安装与简单使用)