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

注册账号与安装开发工具

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

创建项目

AppID为开发->开发管理->开发设置

点击“确定”项目就创建成功~

文件结构

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

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

新建文件夹

只需要修改app.json配置信息即可

加一句这个
自动生成文件夹

根据pages内的配置信息的上下顺序来决定当前显示的界面

全局配置

参考文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

Window

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

TabBar

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

List数量必须是2~5之间

组件

官网:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

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

效果图

点击第一个按钮成功得到

点击第二个按钮进行询问

点击允许

成功得到…

---

微信小程序入门完结~