微信小程序系列（一）：创建第一个小程序

微信小程序作为主流的门户，现在开始进入微信小程序实战教程

第一章节，主要是介绍如何创建一个小程序项目

一、创建项目

创建新的home页面

1.1、在pages右键新建文件夹，并命名为home

1.2、在home文件夹中，新建page。并命令为home。此时会自动生成四个文件。如图所示

1.3、修改app.json

新建主页设置成功！！！

二、小程序目录介绍

• home.js:脚本，控制逻辑使用
• home.json
• home.wxml：用于基本框架，类似于html
• home.wxss:用于写css

先来做一个简单的demo

1、搭建基本骨架，在home.wxml增加代码

<!--pages/home/home.wxml-->
<view>
    <image class="top-theme" src="{{topTheme.entrance_img}}" ></image>
</view>

2、编写对应的css,在home.wxss

/* pages/home/home.wxss */
.top-theme{
    width:100%;
    height:260rpx;
}

3、创建config文件夹，创建config.js文件。把通用配置类信息添加进去。

const config={
    appkey:'######',
    apiBaseUrl:'http://se.talelin.com/v1/'

}
/* 引出*/
export{
    config
}

4、在home.js写逻辑，把数据绑定到home.wxml

// pages/home/home.js
import {
    config
} from "../comfig/config.js"
Page({
    /**
     * 页面的初始数据
     */
    data: {
        WebTitle:"Fox_Test",
        topTheme: null
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.request({
        //模板字符串
          url :`${config.apiBaseUrl}theme/by/names`,
          //   url: 'http://se.talelin.com/v1/theme/by/names?names=t-1,t-2',
          method:'GET',
          data:{
            names:'t-1,t-2'
          },
          header:{
              appkey:config.appkey
          },
          success: res => {
              //console.log(res);
            this.setData({
                topTheme:res.data[0]
            })
          }
        })
    }
})

demo优化

• 逻辑不写在home.js 不然代码臃肿，不易维护
• wx.request重复调用型问题，代码繁琐
• promisic优化

1、引用promisic优化

在utils文件夹中添加promisic.js

const promisic = function (func) {
    return function (params = {}) {
      return new Promise((resolve, reject) => {
        const args = Object.assign(params, {
          success: (res) => {
            resolve(res);
          },
          fail: (error) => {
            reject(error);
          }
        });
        func(args);
      });
    };
  };

  export{
    promisic
  }

2、创建http.js,重新封装wx.request

import { config } from "../pages/comfig/config";
import { promisic } from "./promisic";
class Http{
    static async request({
        url,
        data,
        method='GET'
    }) {
    const res = await promisic(wx.request)({
            url:`${config.apiBaseUrl}${url}`,
            data,
            method,
            header:{
                appkey:config.appkey
            }   
        })
        return res.data;
    }
}
export{
    Http
}

3、修改home.js

// pages/home/home.js
import {
    config
} from "../comfig/config.js"
import {
    Theme
} from "../model/theme.js"
Page({
    /**
     * 页面的初始数据
     */
    data: {
        WebTitle:"Fox_Test",
        topTheme: null
    },
    onLoad : async function(){
        const data = await Theme.getHomelocationA();
        console.log(data);
        this.setData({
            topTheme:data[0]
        })
    }
})

注意：如果使用了await,函数的头要增加async

代码修改成功。

接下来进行第二个入门教程：引入UI框架

为什么要引入UI框架呢？引入UI框架可以使开发更简单容易。