微信小程序前端入门

微信小程序前端入门

---

• 编辑：HBuilderX（标准版，官网：https://dcloud.io/hbuilderx.html）
• 运行：微信开发者工具
• 框架：uni-app（官网：https://uniapp.dcloud.io/）
• 发布平台：微信公众平台（https://mp.weixin.qq.com/）

项目创建、运行、上传和发布

• 创建：文件->新建->项目，uni-app，默认模板
• 运行：运行->运行到小程序模拟器->微信开发者工具（最常用）（也可以运行到浏览器上）
• 上传：运行时，在微信开发者工具中，右上角上传->确定->上传，上传后为开发版（开发版仅体验成员可使用）（必须配置小程序AppID才能上传至微信公众平台，否则上传按钮无法点击）
• 发布：在微信公众平台，管理->版本管理->将开发版提交审核，审核通过后发布（全量发布）

项目文件结构

创建后的文件目录：

• pages：小程序的所有页面代码
• static：小程序的静态资源，如图片等
• App.vue：全局变量和全局样式的设置
• pages.json：管理页面
• mainfest.json：小程序配置（必须配置基础配置->uni-app应用标识AppID（直接获取）和微信小程序配置->微信小程序AppID（微信公众平台获取，开发->开发管理->开发设置，开发者ID->AppID））(此ID为小程序唯一标识)

微信开发者工具

• 首次运行时，需在设置->安全中，将服务端口打开

• 

• 调试器

  • 
  • wxml：页面布局
  • styles：页面元素的css样式（可进行修改方便调整UI，但实际代码不会变动，代码要在HbuilderX里改
  • console：控制台，输出程序运行情况
  • AppDate：当前页面的数据，对应HBuilder中页面的data
    

• 

  • 编译：点击可进行重新编译
  • 预览：点击生成预览二维码，可在手机进行预览
  • 真机调试：点击生成二维码，可在手机进行调试，同时电脑微信开发者工具控制台会实时显示调试信息（有些模拟器没有的bug可以通过真机调试找出；有些组件在iOS和安卓上运行效果不同，也能借此找出）

页面创建与删除

创建

pages文件夹目录下右键->新建页面，默认模板，创建（勾选’在pages.json‘中注册），创建完成时pages.json中会自动注册该页面，如果删除页面需手动在pages.json中删去相关代码

style是该页的样式；globalStyle是全局样式。style会覆盖掉globalStyle

navigationBarTitleText是页面标题；enablePullDownRefresh，下滑刷新