零基础小程序入门详解一

小程序入门详解一题

小程序与普通网页开发的不同

• 运行环境不同：网页运行在浏览器环境中，小程序运行在微信环境中
• API不同：由于运行环境不同，所以小程序中无法调用DOM和BOM的API，但是小程序中可以调用微信提供的各种API,例如地理定位，扫码，支付等
• 开发模式不同：网页是浏览器+代码编辑器，小程序有自己的开发模式，首先申请小程序的开发账号，安装小程序开发者工具，安装和配置小程序项目

注册小程序开发者账号

https://mp.weixin.qq.com
点击右上角的立即注册---->小程序---->填写账号信息---->进入邮箱点击连接激活---->填写主体和主体信息---->继续

获取小程序AppID

https://mp.weixin.qq.com(账号密码就是你注册时填写的邮箱和密码)
登录小程序开发后台---->开发---->开发设置---->开发者ID---->AppID

安装开发者工具（微信开发者工具是官方推荐使用的小程序开发工具，它主要提供如下功能：）

• 快速创建小程序项目
• 代码的查看和编辑
• 对小程序功能进行调试
• 小程序的预览和发布

下载（推荐下载和安装最新的稳定版）

https://developers.weixin.qq.com/miniporgram/dev/devtools/stable.html

设置微信开发者工具的外观和代理（可以根据实际需求设置）

• 外观：设置---->外观（我自己的设置:字号18行间距12主体浅色）
• 代理：不使用任何代理

创建项目（可以根据实际需求设置）

小程序---->加号---->新建项目（导入项目是导入已有的项目）---->设置目录（项目存放位置）---->AppID---->后端服务（不使用云服务）---->语言（js）---->新建在这里插入代码片

查看项目实际效果

• 在模拟器上查看项目效果（点击编译按钮）
• 在真正手机上查看项目效果（点击预览按钮---->扫描二维码）

主界面的五个组成部分

• 菜单栏：常用的帮助---->开发者工具---->小程序开发文档
  设置：快捷键外观等
  工具：构建npm等

• 工具栏：上方的模拟器编辑调试器按钮，点击可以显示隐藏对应的区域
  详情：可以查看项目的基本信息（使用别人的项目时需要换成自己的AppID）

• 模拟器：顶部可以选择机型（推荐使用iPhone6，比例推荐85%）
  底部是路径，下拉可以看参数和切换路径等

• 目录：下方详解

• 代码区域：略

• 调试器：跟谷歌类似

小程序代码构成

• pages:存放项目中所有页面
• untils:存放工具性质的模块
• app.js:入口文件
• app.json:全局配置文件
• app.wxss:全局样式文件
• project.config.json:配置文件
• sitemap.json:配置小程序及其页面是否允许呗微信索引

小程序页面组成部分

页面都放在pages文件夹下，每个页面都是以单独的文件夹存在，每个文件夹下有四个文件

• .js文件：叶页面的脚本文件，存放页面的数据，事件处理函数等
• .json文件：当前页面的配置文件，配置窗口的外观表现等
• .wxml文件：页面的模板结构文件
• .wxss文件：页面的样式文件

最终这四个文件会被编译成一个完整的页面

json配置文件的作用

对项目进行不同级别的配置，小程序项目中有4中json配置文件

• app.json:整个项目的全局配置文件（包括了所有页面的路径，窗口外观，界面表现，底部tab等）

{
  “pages”:[   //当前项目的所有路径
        "pages/index/index",
        "pages/logs/logs"
   ],
   “window”:{   //全局定义小程序所有的页面背景色，文字颜色，窗口颜色等
         “backgroundTextStyle”:"light",
         "navigationBarBackgroundColor":"#fff",
         "navigationBarTitleText":"weChat"，
         “navigationBarTextStyle”:"black",
   }，
   “style“:"v2",//全局定义小程序组件的样式版本
   "sitemapLocation":"sitemap.json"//用来指明sitemap.json的位置
}

• project.config.json:用来记录我们对小程序开发所做的个性化配置
  例如：setting中是编译的相关配置，projectname中保存的项目名称，AppID中保存的小程序的账号ID

{ 
   “setting”:{  //如果不希望在终端中显示黄色警告消息时
        "checkSiteMap":false
   }
}

• sitemap.json:微信现在已经开放小程序内搜索，效果类似于PC网页的SEO，sitemap.json用来配置小程序页面是否允许微信索引，当开发者允许微信索引是、时，微信会通过爬虫的形式，为小程序的页面内容建立索引，当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中

{
   “rules”:{  //allow代表允许所有页面被微信索引，disallow代表不允许
   "action":"allow",
   "page":"*"
   }

}

• 每个页面中的.json：对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中的相同配置项（页面配置与app.json配置文件冲突时以页面配置文件为准）