• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序学习记录

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

从零开始学微信小程序,一点一滴记录学习进程

1)小程序开发准备

第一步,先申请微信小程序账号

① 进入小程序注册页(贴了链接,发现无法直接打开。跳转之后,重刷一下页面即可) 根据指引填写信息和提交相应的资料,注册微信小程序账号。

 

根据指引,填写之后。会到邮箱**,填写个人信息,绑定微信号。完成之后就能得到自己的第一个小程序账号。

②填写小程序的信息,主要包括名称。简称,头像。编写完成。进入到开发设置

拿到AppID(小程序ID)后面,开发的时候会用到。

 

2)安装开发者工具

① 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

下载符合自己操作系统的开发者工具之后。按照要求一步步安装。

②打开微信开发者工具

点击加号,就可以一个新建小程序项目,填入自己的APPID,给小程序去一个名字,下面既可以选择勾选云服务,也可以不勾选。我这里勾选"不使用云服务"。

3)目录结构介绍

小程序包含一个描述整体程序的app和多个描述各自页面的page

①  APP:一个小程序主体部分会由三个文件组成,必须放在项目的根目录,如下:

文件名 是否必须 说明
app.js 主要负责小程序的逻辑
app.json 小程序的公共配置
app.wxss 小程序的公共样式表

②PAGE: 一个小程序页面部分由四个文件组成,分别是:

文件类型 是否必需 说明
js 小程序的页面逻辑
wxml 小程序的页面结构
json 小程序的页面配置
wxss 小程序的页面样式表

为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名

4)小程序的文件介绍

小程序有四种不同类型文件,分别是:

A: json 后缀的 JSON 配置文件

B: wxml 后缀的 WXML 模板文件

C: wxss 后缀的 WXSS 样式文件

D: js 后缀的 JS 脚本逻辑文件

A:新建一个小程序项目。初始化时,项目的根目录会生成一个 app.json 和project.config.json,sitemap.json,同时 pages/logs 目录下还有一个 logs.json

a: app.json。app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网    络超时时间、底部 tab 等。

entryPagePath指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数。

pages用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json.js.wxml, .wxss 四个文件进行处理。未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。

window用于设置小程序的状态栏、导航条、标题、窗口背景色。

sitemapLocation指明 sitemap.json 的位置,

style(非必填)指定使用升级后的weui样式

具体可以查看全局配置文档

b:project.config.json工具配置类。在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,包括编辑器的颜色、代码上传时自动压缩等等一系列选项。开发者工具的配置 

miniprogramRoot指定小程序源码的目录(需为相对路径)

pluginRoot指定插件项目的目录(需为相对路径)

c:sitemap.json索引配置,小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。

具体配置说明

页面收录设置:可对整个小程序的索引进行关闭,小程序管理后台-功能-页面         内容接入-页面收录开关;

sitemap 配置:可对特定页面的索引进行关闭。注:sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。注: sitemap 文件内容最大为 5120 个 UTF8 字符。

完整配置项说明请参考小程序 sitemap 配置

d:页面配置 page.json,page.json 其实用来表示 pages/xxx目录下的 xxx.json 这类和小程序页面相关的配置。如果整个小程序的风格是蓝色,那么可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能小程序里边用不一样的色调来区分不同模块,因此提供了 page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。其他配置项细节可以参考文档 小程序页面配置。 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
快速上手,使用 Kotlin 把支付宝小程序装进自己的 App发布时间:2022-07-18
下一篇:
微信小程序快捷键(Mac和windows)发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap