微信小程序快速上手【1】

最新推荐文章于 2024-07-12 10:47:27 发布

H-rosy

最新推荐文章于 2024-07-12 10:47:27 发布

阅读量580

点赞数

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_51580852/article/details/126843492

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

project.config.json：相当于vue中的package.json配置文件

如果你有前端三件套的知识那么我相信你入手肯定是非常快的。如果你有vue的基础那我相信你可能不出一个上午就会看懂微信小程序的结构，就能够达到入门水准。如果你vue的开发环境使用的是VsCode那么恭喜你微信开发者工具就是一个高仿的vscode编译器。

首先你如果有以上的知识不要害怕他有多难，要有充足的信心，毕竟像我这样的菜狗都觉得不太难。如果有需要你可以试着看看尚硅谷的微信小程序入门（就是它的视频一直有杂音那个，讲的真的很细）。

下载工具：

微信开发者工具下载地址：稳定版 Stable Build | 微信开放文档

下载完成进入的页面

点击那个大大的加号，因为我是先创建过一个一个Demo了

先去微信公众平台注册一个账号，为了下面获取APPID用：微信公众平台 (qq.com)

注册好后进入下面这个界面：

选择开发中的开发管理

继续找到开发设置中的APPID，点一下就出来了，复制下来接下来会用

创建好后的界面结构

可以把其他的都删了从新跟着我写，就像初始化好一个vue项目后都会有一个helloWorld.vue文件和其他配件一样。推倒从新写就好了，也有助于我们更好的理解页面结构！推倒推倒，统统推倒！

但是要留下三个文件哦：sitemap.json、project.private.config.json、project.config.json

只剩下三个页面后，新疆一个app.json

语法基本介绍：

index文件中的index.wxml就相当于html文件，简单介绍一下语法

<view></view>就相当于div标签

数据绑定：{{}}和vue的语法一样

<view> {{message}} </view>

<text></text>标签就相当于<span></span>标签

数据data:

vue2中是在script标签中的data()函数，但是小程序中是在单独的index.js文件中的Page中

Page({
  data: {
    message: 'Hello MINA!'
  }
})

建立一个app.js文件，在文件中输入app,应该是选择第三个，就是看右侧有APP标识的，他会帮助我们自动创建结构。

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

页面结构：

下面我们浅浅的写一下静态页面。首先先看一下我的项目结构：

这里我建立了一个和pages同级的statics文件夹，用来管理静态资源，里面创建了一个images文件夹用来存放图片资源。

在新建一个文件夹pages，在pages中新建一个文件夹index，点击index右键选择新建Pages，会自动给你创建四个文件。

index.js:页面数据区域

自动初始化的index.js文件，但是里面我家里一些数据为了演示在组件加载时改变data中的信息，改变信息是通过setData()方法改变的。这个函数和mounted函数差不多。

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      msg:'我是Hrosy'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
// 相对于vue中的 mounted
//使用setData可以修改数据,和vue2一样使用Object.defineProperty实现数据劫持
console.log(this.data.msg)
//这个方法是同步执行的
this.setData({
  msg:'修改之后pc李易峰'
}),
console.log(this.data.msg)

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

index.wxss:当前页面样式区域

我们在index.wxss中书写这一个页面的样式：

/* pages/index/index.wxss */

.container{
  display: flex;
  /* 设置主轴 */
  flex-direction: column;
  align-items: center;
  /* 设置侧轴排列方式 */
  /* justify-content: center; */
}
.avatarUrl{
  width: 180rpx;
  height: 180rpx;
  border-radius: 45px;
  margin: 100rpx 0;
}

index.wxml:当前页面内容

在index.wxml中写页面的内容：就是渲染了一个头像哈哈哈

<!--pages/index/index.wxml-->
<view class="container">
<image src="/statics/images/起风了1.jpeg" class="avatarUrl"></image>
<view class="main">
    <text>hello wxchat </text> <br/>
    <text>{{msg}}</text>
</view>

</view>

然后需要介绍的是小程序的每个页面都会有一个page标签，它是这个页面的根标签，如果我们需要设置这个页面的背景颜色就可以在page中书写样式，这里我把这个背景样式写在全局公共样式app.wxml中

app.wxml:全局公共样式

/* 全局公共样式 */
page{
  height: 100%;
  background-color: #99ffcc;
}

app.json：全局配置区域

在这个页面中我们可以用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。在这里我们就先浅浅的配置一下：

文件中的“pages”：代表着vue中的router.js也就是页面路由表，小程序中新增/减少页面，都需要对 pages 数组进行修改。

再建立一个app.wxss(这个是全局公共样式)

输入window会有提示，

navigationBarBackgroundColor：导航栏背景颜色

navigationBarTextStyle：导航栏标题颜色，仅支持 black / white

navigationBarTitleText：导航栏标题文字内容

我们暂时就需要这三个先

更多请看官网API：全局配置 | 微信开放文档

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#669999",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的第一个小程序"
   
  }
}

project.config.json：相当于vue中的package.json配置文件

知道有这个文件就好啦

好啦，微信小程序的基本介绍就暂时到这，想提高能力就必须实战！！！

H-rosy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序快速上手【1】

如果你有前端三件套的知识那么我相信你入手肯定是非常快的。如果你有vue的基础那我相信你可能不出一个上午就会看懂微信小程序的结构，就能够达到入门水准。如果你vue的开发环境使用的是VsCode那么恭喜你微信开发者工具就是一个高仿的vscode编译器。首先你如果有以上的知识不要害怕他有多难，要有充足的信心，毕竟像我这样的菜狗都觉得不太难。如果有需要你可以试着看看尚硅谷的微信小程序入门（就是它的视频一直有杂音那个，讲的真的很细）。
复制链接

扫一扫