微信小程序开发: 开发前准备工作

李增田发布于2019-08-22 18:14 / 1194人阅读

摘要：微信群二维码欢迎交流申请账号点击，进入小程序注册页面并根据指引填写相关数据。下期预告将对微信小程序源文件结构及含义进行详细讲解，敬请期待。

写在开始

本人资深后端码农一枚，近期项目需求，接触到了微信小程序，将学习过程整理成文分享给小伙伴们，由于是边学边整理难免有表述不对的地方，望大家及时指正，感谢。

微信群二维码欢迎交流

申请账号

点击 https://mp.weixin.qq.com/wxop...，进入小程序注册页面并根据指引填写相关数据。

下载开发工具

开发者工具下载地址，根据自己的操作系统下载对应的版本

hello world

运行已安装的微信开发者工具，选择小程序项目，填写上一步的AppID及目录等信息。

在项目目录下分别创建以下文件:

/app.json

{
  "pages": [
    "pages/index/index"
  ]
}

/pages/index/index.js

Page({
  data: {
    hello: "这里将显示Hello文字"
  },
  handleDisplayHello() {
    this.setData({
      hello: "Hello WeChat MiniProgram"
    })
  }
})

/pages/index/index.wxml

 
  {{hello}}

/pages/index/index.wxss

.container {
  display:flex;
  flex-direction: column;
  align-items: center;
}
.container .content{
  margin: 50rpx;
  color: #0000cc;
}

点击工具栏中的编译按钮，在模拟器中可以预览到效果，点击小程序中显示Hello按钮后即可预览Hello WeChat MiniProgram，如图：

以上便是小程序开发的简单准备工作及HelloWorld的Demo实现，下一篇文章将对每个文件进行详细讲解。

下期预告

将对微信小程序源文件结构及含义进行详细讲解，敬请期待。

微信交流群

微信群二维码会定时失效，为了方便更新，将入群二维码放到了Github上传送门>>>

云服务器 GPU云服务器小程序开发公司前十名微信小程序开发微信小程序开发语言微信小程序开发免费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95647.html

甲由科技指出小程序开发过程中需要注意的地方

摘要：在小程序开发和设计的任务和流程过程当中，会出现一些异常情况，这也是用户最需要用到的时候，所以需要特别注意异常状态，在出现问题的时候能给用户明确的提示和一些解决方法。不少企业、商家都开发了属于自己的小程序。需要提醒大家的是，在开发之前一定要做好充足的准备工作，从而保障开发工作能够顺利完成。那么，小程序开发前要做什么准备？showImg(https://segmentfault.com...

chadLi 2019-08-26 14:05 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0