开发微信小程序需要具备wxml、wxss、核心的能力

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

开发微信小程序需要具备wxml、wxss、核心的能力

微信小程序是运行在微信环境中的应用程序。 只能在微信中运行，不能在浏览器等其他环境中运行。 微信团队为微信小程序的开发提供了专门的开发工具，同时也提供了丰富的API让我们的小程序具备与移动设备和微信交互的能力，比如获取相机照片、访问文件系统等。那么与微信的互动主要体现在以下三个方面：

1、获取当前登录微信的用户的用户信息；

2.微信支付；

3.使用模板消息向微信发送通知消息。

开发微信小程序需要一定的前端基础知识，但不是全部。 前端的三个基础是：html、css等。 因此，微信小程序中不使用html，因为它使用的是wxml而不是html。 创朗已经取代了HTML。 虽然原理类似，但是比HTML简单很多。 这种简单性主要体现在标签的简化和标准化上。 剩下两个基础，一个是CSS，一个是微信小程序开发零基础入门，先说CSS吧。 在微信小程序中，是用wxss来代替CSS的，不过这个wxss基本上和CSS类似，只是增加了几个自己的属性。 而且它并不像在浏览器中使用那么复杂。 这里只使用核心。 总之，开发微信小程序需要wxml、wxss（css）和核心能力。

1.学习帮助

（1）官方文档：微信小程序开发文档链接为：，如下图：

（2）微信小程序全套视频教程下载地址：

2.环境设置

**步：下载微信小程序开发工具并安装。 下载路径：

进入下载界面后，根据您的操作系统选择相应的链接进行下载，下载完成后进行安装。

第二步：登录工具

开发工具安装完成后，我们就可以打开它了。 首次打开时，需要用微信扫码登录。输入下图，用手机微信扫码确认登录。

第 3 步：创建项目

登录成功后，如果您是**次使用该工具，会弹出创建项目的窗口，如下图：

​ 创建过程中，如果选择的本地文件夹为空文件夹，则会出现勾选“在当前目录创建快速启动项目”选项。 为了方便初学者了解微信小程序的基本代码结构，请勾选此选项，勾选后开发工具会帮我们在开发目录下生成一个简单的demo，如下图：

第四步：项目代码结构说明

点击开发工具左侧导航栏的“编辑”，我们可以看到这个项目已经初始化完毕，并且包含了一些简单的代码文件。 *关键、*本质的是app.js、app.json和app.wxss。 其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序会读取这些文件并生成小程序实例。

3、目录结构

下面我们简单了解一下这三个文件的作用，方便从头开始修改和开发自己的微信小程序。

1.app.js是小程序的脚本代码。 我们可以监控和处理小程序的生命周期函数，并在这个文件中声明全局变量。 调用框架提供的丰富API，例如本例中的同步存储、同步读取本地数据。

.log('打印日志信息，可见！');

2、app.json是整个小程序的全局配置。 在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式，配置默认标题。 请注意，不能向该文件添加任何注释。

3、app.wxss是整个小程序的通用样式表。 我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

我们注意到示例程序的代码中有两个文件夹，一个是pages，另一个是utils，其中utils是通用工具类方法的文件夹，pages是存放所有页面的文件夹。 让我们重点关注这个页面。

4.文件撰写

在这个例子中，我们有两个页面，索引页面和日志页面，分别是欢迎页面和小程序启动日志显示页面，这两个页面都在pages目录下。 app.json的pages中需要写入微信小程序中每个页面的【路径+页面名称】，pages中的**个页面就是小程序的首页。

每个小程序页面由同一路径下四个不同的同名后缀文件组成，如：index.js、index.wxml、index.wxss、index.json。 .js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的文件是样式表文件，.wxml 后缀的文件是页面结构文件。

​index.wxml是页面的结构文件：

  
    
    {{userInfo.nickName}}
  
  
    {{motto}}
  

在本例中， 、 和 用于构建页面结构、绑定数据和交互处理功能。

​index.js 是页面的脚本文件。 在这个文件中，我们可以监控和处理页面的生命周期函数、获取小程序实例、声明和处理数据、响应页面交互事件等。

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数

  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据

    app.getUserInfo(function(userInfo){
      //更新数据      that.setData({

        userInfo:userInfo
      })
    })
  }
})

index.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;
}

页面的样式表是可选的。 当存在页面样式表时开发微信小程序需要具备wxml、wxss、核心的能力，页面样式表中的样式规则会级联到app.wxss中的样式规则。 如果不指定页面的样式表，也可以直接使用页面结构文件中app.wxss中指定的样式规则。

​index.json 是页面的配置文件：

页面配置文件是可选的。 当存在页面配置文件时，页面中的配置项会覆盖app.json中相同的配置项。 如果没有指定页面配置文件，页面会直接使用app.json中的默认配置。

日志的页面结构

  
    {{index + 1}}. {{log}}
  

​ 日志页面使用控制标签来组织代码，并在其上绑定日志数据，并将日志数据循环到节点中。

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

运行结果如下：

5. 手机预览

（只有获得AppId的才有预览权限。）在开发工具左侧菜单栏选择“项目”，点击“预览”，扫码在微信客户端体验。

6.开发说明

以上就是微信小程序前端开发的基本流程。 事实上，要做一个内容可以更新的小程序，光有前端开发是不够的。 还需要后端开发。 后端开发与Web开发基本相同。 可以选择使用java、php等任意语言。需要注意的是，小程序后端服务器必须是https协议，这就需要购买云服务器和后端服务器。 设置为 https 服务。 这样做的前提是先购买服务器和域名。 服务器可以选择腾讯云服务器，购买地址如下：

要做一个可更新的小程序，光有云服务器是不够的。 由于内容是可更新的，小程序上实际看到的内容大部分都存储在数据库中，所以我们还需要购买云数据库。 ，这个也是腾讯云提供的。 购买地址如下：

腾讯云还可以提供域名购买。 购买地址为：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等