微信开发者工具个人账户使用指南

安装与登录

微信开发者工具安装包可从微信开放文档官网获取。下载完成后运行安装程序，按照指引完成安装。首次启动时，需要使用微信扫码登录开发者账号。成功登录后，界面会显示项目创建入口，点击加号即可开始创建小程序项目。

创建小程序项目

在创建新项目时，需要填写项目名称、选择项目存放目录。对于个人开发者，建议勾选"不使用云服务"选项，这样可以简化初始配置。点击新建按钮后，系统会自动生成小程序的基本框架结构，并进入开发主界面。

项目文件结构

小程序项目包含多种文件类型：

.json文件：配置文件，用于设置小程序的各种参数

.wxml文件：页面结构文件，相当于HTML

.wxss文件：样式文件，相当于CSS

.js文件：脚本逻辑文件

页面配置

小程序的所有页面路由配置在app.json文件中。该文件中的page数组定义了小程序的所有页面路径，数组的第一项默认为小程序首页。通过编辑这个数组，可以添加或删除页面。每次保存app.json文件后，系统会自动创建对应的页面文件。

基础组件

app文件：应用文件，文件名不能变
    app.js     主逻辑文件，入口文件，最先执行的文件， 相当于vue中main.js，必须有
    app.wxss   全局样式文件，非必须文件
    app.json   全局配置文件, 必须有
​
项目对编辑器的配置文件
project.config.json 
​
utils 目录  工具
    非必须的，工具文件，写一些公共的js文件
​
pages 目录， 页面目录
    index 页面目录，
        index.wxml    页面目录 （html）
        index.wxss    页面样式 ( css)
        index.js      页面逻辑  (js)
        index.json    页面配置
    logs 页面目录
        logs.wxml
        logs.wxss 
        logs.js
        logs.json
​
        vue的组件  .vue文件：   style  template  script  

小程序提供了多种内置组件：

view：块级容器组件，相当于HTML中的div

.js 文件 （页面脚本文件，用于存放页面数据、事件处理函数等代码）
.json 文件（是该页面的配置文件，用于配置窗口的外观、表现等）
.wxml 文件（页面的模板结构文件，用于写标签定义页面上的一些结构）
.wxss 文件（是该页面的样式表文件）

text：行内文本组件

navigator：路由跳转组件，代替HTML中的a标签

样式单位

小程序推荐使用rpx作为主要尺寸单位，它可以根据屏幕宽度进行自适应。设计稿通常采用375px宽度，在编写样式时，1px设计稿尺寸对应2rpx小程序代码。

数据处理

  "window": {
    "navigationBarTextStyle": "black",  //导航条文字颜色
    "navigationBarTitleText": "开发者--老高", // 导航条文字

    "navigationBarBackgroundColor": "#ffffff" // 导航条背景颜色
  },

每个页面的数据都定义在对应JS文件的data属性中。小程序采用数据驱动视图的模式，当data中的数据发生变化时，视图会自动更新。对于引用类型的数据，需要使用特定方法才能实现双向绑定。

条件渲染

1.pages选项， 页面路径，所有的页面必须在当前选项中进行配置（除了分包页面）
​
{
    "pages": [
        "pages/index/index",
        "pages/cart/cart",
        "pages/mine/mine"
    ],
}
​
2."entryPagePath": "pages/cart/cart",  启动页

小程序提供了wx:if、wx:elif、wx:else等指令来实现条件渲染。这些指令可以根据不同条件动态显示或隐藏页面内容，提升用户体验和交互性。

WXS脚本

 

hello

WXS是小程序特有的脚本语言，可以在WXML中直接使用。它支持两种写法：

1. 内嵌式：直接在WXML中编写

2. 外链式：作为独立文件引入

WXS采用模块化设计，需要导出的函数才能在模板中使用。

// Page构造器，作用：构建页面
 data: {
    name:"老高"
  },
 

组件开发

 {{name}}

小程序支持自定义组件开发：

1. 创建组件文件夹和文件

// pages/cart/cart.js
Page({
 
 /**
   * 页面的初始数据
   */
 data: {
      name:"老高"
    },
 
 /**

   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
        name:'老高888'
    })
  },
 /* 自定义函数 */
  click(){
    console.log(1);
    this.setData({
      name:this.data.name == "老高666"?"老高888":"老高666"
    })
  }
})

2. 在app.json中配置组件路径

  {{name}}

3. 在使用页面的配置文件中注册组件

  {{name}}

4. 在页面模板中使用组件

/* 自定义函数 */
  click(e){
    console.log(e.currentTarget.dataset);
    this.setData({
      name:this.data.name == "老高666"?"老高888":"老高666"
    })
  }

组件通信方式：

1. 父组件向子组件传递数据：通过属性绑定

target      事件源上的参数
currentTarget  触发事件绑定的组件上的参数
detail     获取的是组件的私有事件上的参数

2. 子组件向父组件传递数据：通过自定义事件

3. 父组件调用子组件方法：通过selectComponent获取实例

父组件定义方法并在调用子组件时传入，子组件内部通过this.triggerEvent触发父组件传入的事件函数，实现组件间通信。