前端wxml取后台js变量值_前端系列——微信小程序开发

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

navigationBarTitleTextstring——导航栏标题文字内容

navigationBarTextStylestringwhite——导航栏标题颜色，仅支持 black / white

复制快捷键：

向下：Alt+Shift+向下光标键

向上：Alt+Shift+向上光标键

5、应用头部布局

由于空间较小等，我们可能在“开发者工具”中开发不太习惯，这时我们可以在其他软件中进行开发，如webstorm中，只需要安装WeChat weapp Support插件。

如需要微信小程序中默认的小图标：

用如下icon标签引入即可(这里引入了搜素图标)：

6、数据请求和页面跳转

在基本布局和样式完成后，就是请求数据和渲染界面。

请求后台api接口数据一般封装一个工具函数，因为有很多页面要请求数据。工具函数的封装大概如下：

然后就是在页面引入使用它：

接下来就是如下所示的一些数据渲染：

在一些页面中要实现页面间的跳转，微信小程序中用bindtap，相当于绑定一个点击事件，然后在对应的js文件中写入需要跳转的页面路径：