微信小程序前端零基础入门案例

1、前置条件

如果想长久使用，建议去官方注册个人账号，流程比较繁琐。但入门案例比较简单，可以先不用去微信小程序官方注册个人账号，只需安装官方提供的微信开发者工具，即可在本地电脑创建并运行小程序。
下载链接：https://pan.baidu.com/s/1A2ngDV-LguBBNyhvGjF8kQ?pwd=4qi5

2、结果展示

3、创建微信小程序项目

3.1下载过程无脑下一步即可，打开开发者工具后点击＋号，创建新项目

3.2 按照如下的配置点击确定即可，

图片违规的话，看文字描述即可，项目名称和目录自定义，AppID是在官方申请的个人账号中的，我的是wx87c1988b028cb1c1，开发模式选择小程序，不使用云服务，JavaScript基础模板。

4、编写代码

4.1双击点开app.json，代码如下，

app.json是全局配置文件，其中pages表示页面路径，window表示整个页面的配置，tabBar是触摸栏，可以在顶部，也可以在底部。注意，编辑区左侧pages目录的index和logs文件可以删除，copy代码后ctrl+s保存后，代码自动编译，左侧会出现三个文件夹，分别是home，message，about。

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/about/about"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "生活服务",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/about/about",
      "text": "关于",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.2 在pages的home下，双击点开home.js，代码如下，

在pages文件夹下，每个文件夹下都有四个xx.js,xx.json,xx.wxml,xx.wxss,其中js后缀的文件保存的是data数据和methods方法，属于逻辑代码，json后缀的文件保存的是本页面的配置（入门暂时用不到），wxml后缀的文件保存的是类似浏览器中的HTML，wxss相当于浏览器中的css样式。

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    SwiperList:[],
    GridList:[]
  },
  getSwiperList(){
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'GET',
      success: (res) =>{
        console.log(res.data);
        this.setData({
          SwiperList: res.data
        })
      }
    })
  },
  getGridList(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'GET',
      success:(res)=>{
        console.log(res.data);
        this.setData({
          GridList: res.data
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList();
    this.getGridList();
  },
})

4.3 双击打开home.wxml,代码如下，

swiper是轮播图标签，view相当于div，image相当于img，image中的src相当于href，wx:for相当于vue中的v-for，wx:key相当于v-key，

<!--pages/home/home.wxml-->
<swiper class="swiperlist" indicator-dots="true" circular="true" autoplay="true" interval="1000">
  <swiper-item wx:for="{
   
   {SwiperList}}" wx:key="id">
    <image src="{
   
   {item.image}}" mode="heightFix"></image>
  </swiper-item>
</swiper>
<view class="gridList">
  <view class="gridItem" wx:for="{
   
   {GridList}}" wx:key="id">
    <image src="{
   
   {item.icon}}"></image>
    <text>{
   
   {item.name}}</text>
  </view>
</view>
<view class="images">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

4.4双击打开home.wxss，代码如下，

相当于css样式一样的效果

/* pages/home/home.wxss */
.gridList{
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid gray;
  border-top: 1px solid gray;
}
.gridItem{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.gridItem image{
  width: 60rpx;
  height: 60rpx;
}
.gridItem text{
  font-size: 24rpx;
  text-align: center;
  margin-top: 10rpx;
}
.images{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.images image{
  width: 45%;
}

5、运行展示

复制代码后，发现部分页面图片加载不出来，记得勾选一下如下选项，详情->本地设置->不校验…，设置完毕后就能全部加载出来了。

6、源码及出处

点这里获取源码，参考某马b站的教学视频