微信小程序(第一篇)

注册微信小程序

浏览器打开点击立即注册

注册完成之后,进入小程序控制台

点击 "开发 --> 开发管理",你可以在"开发者ID"中看到"小程序ID"

同时在这个页面的"服务器域名"中,"request合法域名"中添加地址

下载安装小程序开发工具

点击下载

创建小程序项目

打开微信开发者工具,用微信扫码登录,然后点击" + "按钮

在创建小程序的对话框中,输入项目名称,选择项目存放的目录,AppID一栏填写你在微信小程序官方后台中获取到的AppID,后端服务选择"不使用云服务",模板选择"JS-基础模板",然后点击"确认"按钮

预览和发布小程序

点击"预览"按钮,在弹出界面中选择"启动PC端自动预览",然后点击"编译并预览"按钮

待编译成功,会自动弹出小程序的最终运行效果

当我们开发好小程序之后,还需要把小程序上传到微信的服务器上。点击开发工具右上角的"上传"按钮,在弹出界面中输入更新类型、版本号和项目备注,然后点击上传

如果代码不存在任何问题,很快就会弹出"代码上传成功"的提示框,表示上传成功

上传成功后,我们回到微信小程序官方后台。点击"版本管理" 链接,可以看到上传的小程序版本

点击"提交审核"按钮,按要求填写资料。完成之后,会在审核版本中看到刚刚申请的审核版本

了解项目目录结构

  • 项目的根目录下面有3个文件:app.js、app.json、app.wxss,这3个文件都是主管整个小程序
文件 作用
app.js 整个小程序的代码文件
app.json 整个小程序的配置文件
app.wxss 整个小程序的样式文件
  • pages文件夹下存放的都是小程序的页面,每个页面文件夹下面有4个文件
文件类型 作用
js 页面的代码文件
wxml 页面的页面结构
wxss 页面的样式文件
json 页面的配置信息
  • utils是小程序的公共工具文件夹

添加一个新的页面

  • 选中pages文件夹,然后鼠标移动到pages上方的"新建文件夹"按钮处,并点击它
  • 在弹出的界面中输入文件夹的名称(home)
  • 鼠标选中新建的home文件夹,点击右键,在弹出的菜单中,选择"新建Page"
  • 在弹出的界面中输入页面名称,如home
  • 再次打开app.json文件,会发现pages节点下自动增加了一行 "pages/home/home"

编写界面

  1. 设置小程序的标题: 打开app.json文件,把navigationBarTitleText的值改为"修改后的名称"

  2. view 是容器组件

  3. navigator是导航组件

相关推荐
浪浪山小白兔2 分钟前
HTML5 常用事件详解
前端·html·html5
Python大数据分析@19 分钟前
通俗的讲,网络爬虫到底是什么?
前端·爬虫·网络爬虫
Lysun00141 分钟前
vue2的$el.querySelector在vue3中怎么写
前端·javascript·vue.js
jerry-891 小时前
Centos类型服务器等保测评整/etc/pam.d/system-auth
java·前端·github
小爬菜1 小时前
Django学习笔记(启动项目)-03
前端·笔记·python·学习·django
想要打 Acm 的小周同学呀1 小时前
前端Vue2项目使用md编辑器
前端·编辑器·vue2·markdown 语法
计算机-秋大田2 小时前
基于SSM的家庭记账本小程序设计与实现(LW+源码+讲解)
java·前端·后端·微信小程序·小程序·课程设计
海的预约2 小时前
VUE之路由Props、replace、编程式路由导航、重定向
前端·vue.js·智能路由器
西柚与蓝莓3 小时前
报错:{‘csrf_token‘: [‘The CSRF token is missing.‘]}
前端·flask
德迅云安全-小钱4 小时前
跨站脚本攻击(XSS)原理及防护方案
前端·网络·xss