首页 > 编程语言> 文章详细

微信小程序入门

2021-04-06 21:29:34 阅读：187 来源： 互联网

标签：index 入门微信程序 json tabBar 页面

一、微信小程序是什么

微信小程序是一种不需要下载安装即可使用的应用
微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

二、微信小程序商业价值

依托微信，有强大广泛的用户基础，推广方便
不用安装，即点即用，不用关闭，不占手机内存空间

三、微信小程序和普通H5的区别

微信小程序没有DOM,BOM的API，只能使用EcmaScript核心部分（数组，字符串方法，for,if…）
微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞

四、微信小程序的帐号注册及开发流程

微信小程序的注册

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

按照连接地址给出的提示进行注册

微信小程序登录：

https://mp.weixin.qq.com/


登录后：找到开发-开发管理-开发设置-开发者ID

AppID(小程序ID)	wxb61621e772a9f027

开发和发布流程

开发->提交->审核->发布上线

五、小程序环境搭建与目录结构

微信开发者工具的下载与安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用微信开发者工具创建小程序项目并运行

创建小程序项目的界面如下：

六、手机运行测试

点击微信开发者工具--预览按钮（二维码预览和自动预览）

真机调试：通过开发者工具控制台来实时的高度真机上的项目

七、项目组合作开发项目

1.在组长微信小程序管理后台：管理-成员管理-点击添加成绩按钮（搜索组员微信号按提示添加）
2.从码云上克隆项目(第一次：git clone，后面只是git pull)
3.....每天完成对应的任务
4.再提交到组长指定的仓库分支上

八、小程序目录结构分析与说明

目录结构说明：

app.js:小程序的入口文件 相当于vue中的main.js
app.json:是小程序的全局配置文件，即如果没配置页面json，会自动使用app.json中的配置
app.wxss:是小程序的全局css样式文件,会影响到所有小程序页面的样式
了解 project.config.json：是开发者工具环境配置项
了解 sitemap.json：是不允许小程序蜘蛛索引页面
pages:咱们平时干活常用的目录  相当于vue上的src
		index
			 index.wxml:即页面的结构  相当于html
			 index.wxss:即页面的样式  相当于css
			 index.js:即页面的逻辑部分 
			 index.json:即页面的配置文件

utils:存放常用工具函数的目录,方便复用


问题：小程序如何创建一个新的页面？

新建页面目录--在目录上右键--选择新建page并输入文件名并回车

九、小程序如何实现tabBar导航

第一步：在app.json中添加tabBar配置属性
第二步：在tabBar的list属性中配置要添加的条目
  注意：最少配置2个，最多5个

tabBar参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

配置tabBar具体演示代码：

{
  ....
  "tabBar": {
    "borderStyle":"white",  //tabBar是否有顶部边框
    "list": [  //配置tabBar的列表项数组
      {
        "text": "首页", //每项的名称
        "pagePath": "pages/index/index", //要打开的页面路径，跟pages项有关
        "iconPath": "/imgs/home.png",    //未选中的图标路径
        "selectedIconPath": "/imgs/home_active.png"  //选中的图标路径
      },
      {
        "text": "我的",
        "pagePath": "pages/logs/logs",
        "iconPath": "/imgs/my.png",
        "selectedIconPath": "/imgs/my_active.png"
      }
    ]
  },
  ....
}

标签：index,入门,微信,程序,json,tabBar,页面
来源： https://blog.csdn.net/weixin_54676931/article/details/115471438

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9