您现在的位置: 首页 > 微信文章 > 小程序 > 前端系列——微信小程序开发

前端系列——微信小程序开发

发布人:微信群  热度:38  发布时间:2019/9/12 20:31:22
1、微信小程序的注册和微信开发者工具的下载在微信公众平台注册小程序账号,注册时注意小程序和公众号不能使用同一个帐号,登录小程序时,公众号会自动下线。一般账号为邮箱号,所以提前准备俩邮箱号,方便注册。注 ...

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文件中写入需要跳转的页面路径:

前端系列——微信小程序开发

前端系列——微信小程序开发


来源:SEO研究协会微信文章,小程序

分享家规则

1、第一分享家好处是什么?

1)文章会挂上你的二维码提高爆光率

2)分享出去的文章你就是作者

3)将会获得网站金币

4)首页推荐快速加粉丝

5)像公众号一样传播你的文章

2、如何成功激活分享家?
任何微信搜索用户都可以成为分享家,您只要把任何一篇文章成功分享到微信朋友圈(必须是微信朋友圈,分享到其他平台是激活不了的哦),系统就会立即自动激活您成为分享家。
3、如何成为第一分享家?
第一分享家是分享家族中最高荣誉,在分享家族中分享同一篇文章贡献值最高的用户就是该文章的第一分享家。
4、怎样统计我的贡献值?
贡献值是来自您分享文章到微信朋友圈好友的访问量,访问IP次数越多,贡献值就越高。同样您朋友在微信朋友圈转发您分享的文章,其贡献值也是属于您的。朋友帮您转发的越多,您的贡献值就会更高。

登录 关闭

可以用我爱广告任务网的账户直接登录