1、微信小程序的注册和微信开发者工具的下载
在微信公众平台注册小程序账号，注册时注意小程序和公众号不能使用同一个帐号，登录小程序时，公众号会自动下线。一般账号为邮箱号，所以提前准备俩邮箱号，方便注册。注册号一号进入如下界面：
可以完善小程序信息，以及实名认证等，这些都是傻瓜式的操作，懂汉语就行，不知道在哪里就多试试，试试又不怀孕！
然后下载你开发的工具：
下载完成后安装即可。
2、创建项目
进入开发工具界面，新建开发项目：
这里会自动生成一些文件夹，下面是文件夹的具体说明：
pages:存放项目页面文件,一般一个目录对应一个页面。
utils:存放工具函数（一般是自己封装）。
app.js:全局的逻辑处理
app.json: (1)页面文件路径设置
(2)窗口外观设置
(3)设置/添加tabbar(底部/顶部导航)
app.wxss:全局样式
project.config.json:项目配置文件
sitemap.json:小程序内搜索，开发者可以通过 `sitemap.json` 配置，或者管理后台页面收录开关来配置其小程 序页面是否允许微信索引
小程序中.wxml对应的是html文件，.wxss对应的是css文件。
文件夹中文件组成：
home.js:逻辑处理
home.json:静态数据
home.wxml:页面结构
home.wxss:页面布局
3、利用tabBar设置小程序的菜单导航
上面写到设置、添加tabBar在app.json文件中，所以在此文件中设置需要的菜单导航，以及引入需要的图标。这里可以将整个项目中用到的小图标在阿里图标库中进行添加，跟vue项目中一样，然后下载到本地，将对应的文件复制到项目文件中即可。
这里一般设置三个导航项，iconPath为默认未点击时显示的图标路径，selectedIconPath为选择点击后的图片路径。效果如下图：
如果想让导航位置位于整个页面的上方，可以将tabBar中的position属性设置为top即可。
这里拷贝一下微信官方文档内容，供大家参考：
4、全局设置
backgroundTextStyle string dark——下拉 loading 的样式，仅支持 dark / light
avigationBarBackgroundColor HexColor #000000——导航栏背景颜色，如 #000000
navigationBarTitleText string——导航栏标题文字内容
navigationBarTextStyle string white——导航栏标题颜色，仅支持 black / white
复制快捷键：
向下：Alt Shift 向下光标键
向上：Alt Shift 向上光标键
5、应用头部布局
由于空间较小等，我们可能在“开发者工具”中开发不太习惯，这时我们可以在其他软件中进行开发，如webstorm中，只需要安装WeChat weapp Support插件。
如需要微信小程序中默认的小图标：
用如下icon标签引入即可（这里引入了搜素图标）：
6、数据请求和页面跳转
在基本布局和样式完成后，就是请求数据和渲染界面。
请求后台api接口数据一般封装一个工具函数，因为有很多页面要请求数据。工具函数的封装大概如下：
然后就是在页面引入使用它：
接下来就是如下所示的一些数据渲染：
在一些页面中要实现页面间的跳转，微信小程序中用bindtap，相当于绑定一个点击事件，然后在对应的js文件中写入需要跳转的页面路径：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。