首页 > 编程语言 >从零基础开始开发自己的第一个微信小程序

从零基础开始开发自己的第一个微信小程序

时间:2023-08-03 16:03:03浏览次数:36  
标签:文件 第一个 微信 程序 开发 cloud 页面

内容介绍

通过本篇blog,你可以熟悉从零开始,搭建小程序开发环境,并运行起自己的第一个小程序。

小程序开发步骤

1、 注册账号 2、 下载开发工具搭建开发环境 3、 创建工程,编写代码 4、 手机上查看效果 通过以上四步就能创建属于自己的小程序了。

注册微信小程序账号

注册完成后是这样的 在这里插入图片描述

下载开发工具搭建开发环境

小程序开发工具下载地址

下载对应的稳定版本即可,如下图 在这里插入图片描述

下载并安装好工具后,打开工具需要扫码登入,登入后界面如下图 在这里插入图片描述

创建工程编写代码

点击+ 创建新项目 在这里插入图片描述 这里的APPID需要去“开发设置”界面查看 在这里插入图片描述

里面有很多模板可以选择,我选择了一个To do的模板 在这里插入图片描述

它会提示 没有设置云开发相关的设置的错误提示,暂时不用管,程序一样能跑,只能没有后端,不能保存数据,不能与后端交互。 这里选择真机调试,然后用自己的微信扫下二维码,就能在手机上看到自己的第一个小程序了。 在这里插入图片描述 在这里插入图片描述

手机上查看效果

真机运行结果如下:

错误提示”当前小程序没有配置云开发环境请在envList.js 中配置你的云开发环境“ 点击确定即可。

在这里插入图片描述

前端界面还是可以操作的,可以填写代办事项的相关属性,只是不能上传保存。 在这里插入图片描述

工程里的文件作用介绍

微信小程序的工程文件主要由以下几个部分组成:

app.js:小程序的入口文件,用于注册小程序实例,并监听小程序的生命周期事件。

App({
  async onLaunch() {
    this.initcloud()

    this.globalData = {
      // 用于存储待办记录的集合名称
      collection: 'todo',
      // 最大文件上传数量
      fileLimit: 2
    }
  },

  flag: false,
  /**
   * 初始化云开发环境(支持环境共享和正常两种模式)
   */
  async initcloud() {
    const shareinfo = wx.getExtConfigSync() // 检查 ext 配置文件
    const normalinfo = require('./envList.js').envList || [] // 读取 envlist 文件
    if (shareinfo.envid != null) { // 如果 ext 配置文件存在,环境共享模式
      this.c1 = new wx.cloud.Cloud({ // 声明 cloud 实例
        resourceAppid: shareinfo.appid,
        resourceEnv: shareinfo.envid,
      })
      // 装载云函数操作对象返回方法
      this.cloud = async function () {
        if (this.flag != true) { // 如果第一次使用返回方法,还没初始化
          await this.c1.init() // 初始化一下
          this.flag = true // 设置为已经初始化
        }
        return this.c1 // 返回 cloud 对象
      }
    } else { // 如果 ext 配置文件存在,正常云开发模式
      if (normalinfo.length != 0 && normalinfo[0].envId != null) { // 如果文件中 envlist 存在
        wx.cloud.init({ // 初始化云开发环境
          traceUser: true,
          env: normalinfo[0].envId
        })
        // 装载云函数操作对象返回方法
        this.cloud = () => {
          return wx.cloud // 直接返回 wx.cloud
        }
      } else { // 如果文件中 envlist 不存在,提示要配置环境
        this.cloud = () => {
          wx.showModal({
            content: '当前小程序没有配置云开发环境,请在 envList.js 中配置你的云开发环境', 
            showCancel: false
          })
          throw new Error('当前小程序没有配置云开发环境,请在 envList.js 中配置你的云开发环境')
        }
      }
    }
  },

  // 获取云数据库实例
  async database() {
    return (await this.cloud()).database()
  },

  // 上传文件操作封装
  async uploadFile(cloudPath, filePath) {
    return (await this.cloud()).uploadFile({
      cloudPath,
      filePath
    })
  },

  // 下载文件操作封装
  async downloadFile(fileID) {
    return (await this.cloud()).downloadFile({
      fileID
    })
  },

  // 获取用户唯一标识,兼容不同环境模式
  async getOpenId() {
    const {
      result: {
        openid,
        fromopenid
      }
    } = await (await this.cloud()).callFunction({
      name: 'getOpenId'
    }).catch(e => {
      let flag = e.toString()
      flag = flag.indexOf('FunctionName') == -1 ? flag : '请在cloudfunctions文件夹中getOpenId上右键,创建部署云端安装依赖,然后再次体验'
      wx.hideLoading()
      wx.showModal({
        content: flag, // 此提示可以在正式时改为 "网络服务异常,请确认网络重新尝试!"
        showCancel: false
      })
      throw new Error(flag)
    })
    if (openid !== "") return openid
    return fromopenid
  }
})

app.json:小程序的全局配置文件,用于配置页面路径、窗口样式、网络请求等全局设置。

{
  "pages": [
    "pages/list/index",
    "pages/add/index",
    "pages/file/index",
    "pages/edit/index",
    "pages/detail/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发待办",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

app.wxss:小程序的全局样式文件,定义小程序中所有页面的公共样式。

/* 引入 weui 组件 */
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

page {
  --footer-height: 10vh;
  --button-size: 16vw;
  --button-color: #353535;
  --button-icon-size: 6vw;
}

page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  overflow-x: hidden;
}

button {
  background: initial;
}

button:focus {
  outline: 0;
}

button::after {
  border: none;
}

.form-group {
  width: calc(100% - 40px);
  margin: 10px 20px;
  border-radius: 10px;
  background: white;
}

.form-group_label {
  align-self: flex-start;
  margin-left: 20px;
  color: #8D8D8D;
  font-size: 15px;
}

.form-group_label:not(:first-child) {
  margin-top: 20px;
}

.form-cell {
  padding: 20px 15px;
}

.form-cell:not(:last-child) {
  border-bottom: rgba(0, 0, 0, 0.05) solid 1px;
}

.form-cell.inline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

pages文件夹:该文 件夹包含了小程序的所有页面,每个页面通常由四个文件组成: 在这里插入图片描述

.js文件:页面的逻辑文件,用于处理页面的数据和交互逻辑。 .wxml文件:页面的结构文件,使用类似HTML的标记语言定义页面的结构。 .wxss文件:页面的样式文件,用于定义页面的样式。 .json文件:页面的配置文件,用于配置当前页面的一些特殊设置,如导航栏标题、下拉刷新等。 utils文件夹:该文件夹用于存放小程序的工具类文件,如封装的网络请求、工具函数等。

project.config.json:项目配置文件,用于配置小程序的项目信息、编译配置等。

其他资源文件:小程序开发中可能会使用到的其他资源文件,如图片、字体等。

这些文件组成了微信小程序的工程结构,开发者可以根据需要进行修改和扩展。在开发过程中,主要关注的是页面文件(包括逻辑、结构、样式和配置)以及全局配置文件,通过编写和修改这些文件来实现小程序的功能和界面展示。

总结

微信小程序的开发相对来说是比较方便的。微信小程序使用的是前端开发技术,主要是基于HTML、CSS和JavaScript,如果你熟悉这些技术,上手开发小程序会比较容易。

以下是一些微信小程序开发的便利之处:

  1. 开发工具:微信提供了一套完整的开发工具,包括开发者工具和调试工具,可以方便地进行代码编写、调试和预览。

  2. 文档和教程:微信官方提供了详细的开发文档和教程,包括开发指南、API文档和示例代码,可以帮助开发者快速入门并解决问题。

  3. 前端技术:微信小程序使用的是前端开发技术,相对于其他平台可能更为熟悉和广泛使用。许多前端开发人员已经具备了相关的技能和经验,可以快速上手进行开发。

  4. 市场和用户:微信拥有庞大的用户基础,小程序可以直接在微信内使用,无需用户下载和安装,方便用户访问和使用。

  5. 开放能力:微信小程序提供了丰富的开放能力,包括访问微信用户的个人信息、支付、地理位置、摄像头等,可以实现更多的功能和交互体验。

当然,具体开发的难易程度还是会受到个人的技术水平和项目的复杂性等因素的影响。但总体来说,微信小程序的开发是相对方便和高效的,适合初学者和有一定前端开发经验的开发者。

标签:文件,第一个,微信,程序,开发,cloud,页面
From: https://blog.51cto.com/u_15777557/6950018

相关文章

  • 微信小程序7 事件绑定,传值,嵌套传值
    之前介绍的控件,比如按钮,单选,复选这些,通常我们都需要绑定相应的事件来实现功能。以button为例找到之前我们test页面的按钮,使用bind:tap绑定js事件<buttonbind:tap="clickBtn1">我是按钮1</button>在test.js中追加方法clickBtn1(){console.log("btn1isclick");......
  • uniapp中使用微信支付
     超简单wx.requestPayment({ timeStamp:zhifu.timeStamp,//需要的参数,由后端返回 nonceStr:zhifu.nonceStr,//需要的参数,由后端返回 package:zhifu.prepayId,//需要的参数,由后端返回 signType:zhifu.signType,//需要的参数,由后端返回 paySign:zh......
  • spring-boot(廖师兄微信下单系统)学习笔记
    1、lombok工具1.1、依赖groupId:org.projectlombok;artifactId:lombok1.2、idea要安装lombokplugin1.3、作用:对model类加一个@Data注解就可以省写setandget方法对类加@Slf4j注解可以直接通过log调用日志方法对类加@Getter注解就可以省去写get方法2、不要在for中有查询......
  • 微信小程序页面跳转方法总结
    在我们日常的开发过程中,跳转页面是每个项目中必有的需求,包括监听返回按钮,回到指定页面,在小程序中页面跳转即页面路由页面栈框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一......
  • iTOP-STM32MP157开发板一键烧写 QT 程序到开发板
    1根据上一小节设置好编译套件后,打开自己的qt工程,然后点击qtcreator里面的项目,把编译器切换成上一章节设置好的的编译器,如下图所示:2然后打开要编译的QT代码的pro文件,在里面添加以下代码,这俩行代码的意思是说把编译的可执行程序下载到开发板的/opt目录下并执行。target.pa......
  • 整数加法小程序(新人入门)
     #include<stdio.h>intmain(){ printf("本程序为整数求和程序\n"); intnum1=0; intnum2=0; intsum=0; printf("请输入第一个整数:"); scanf_s("%d",&num1); printf("请输入第二个整数:"); scanf_s("%d",&num2);......
  • Linux 驱动程序模块详解
    Linux驱动程序模块是一种可执行代码,用于管理硬件设备。通常,驱动程序模块是以源代码形式进行开发的,然后编译成二进制模块,最后加载到Linux内核中。以下是关于Linux驱动程序模块的详细介绍:1、模块分类根据驱动程序用途的不同,Linux驱动程序模块可以分为多个类型,包括字符设备驱动程序、......
  • 微信小程序中获取用户信息、用户手机号
    1、小程序中获取用户信息、用户手机号等,属于敏感操作,需要用户主动触发,即:<buttonopen-type="getPhoneNumber"onGetPhoneNumber="handleGetPhoneNumberButtonClick">一键登录</button>上面的伪代码是获取用户手机号的操作,点击按钮会第一时间触发半屏弹窗让用户授权获取手......
  • 小程序云开发快速入门(2/4)
    前言我们对《微信小程序云开发快速入门(1/4)》的知识进行回顾一下。在上章节我们知道了云开发的优势以及能力,并且我们还完成了码仔备忘录的本地版到网络版的改造,主要学习了云数据库同时还通过在小程序使用云API直接操作了云数据库:使用get()进行了数据库的查询使用add()进行了数据......
  • 微信小程序:富文本编辑器组件
    参考文章:微信小程序之实现封装一个富文本编辑器Editor的完整流程【附demo源码】欢迎点赞收藏地址:https://blog.csdn.net/XH_jing/article/details/115509316demo源码: https://github.com/jxh1997/Editor ,所以源代码均在Github上,下载即可使用。我个人在demo源码的基础上稍......