微信小程序入门开发

微信小程序

1. 使用微信开发者工具进行开发

2. 开发微信小程序需要有外网（基于微信官方开发文档进行开发的）

3. 微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

4. 微信小程序创建项目：

   • 安装好微信开发者工具

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQXWu51t-1624871581738)(images\1.png)]

5. 微信小程序目录介绍

   pages				//存放小程序所有页面
   utils				//封装好的工具类或者工具文件
   app.js				//全局js
   app.json			//页面全局静态配置 ，包括了小程序的所有页面路径、界面表现、、底部 tab 等。
   app.wxss			//全局样式
   

   所有的app开头的文件都是全局文件

   微信小程序修改之后使用ctrl+s保存并运行或者点击编译按钮也可

6. app.json页面介绍

   {
     "pages": [
       "pages/musiclist/musiclist",
       "pages/artistlist/artistlist"
     ],
     "window": {
       "backgroundTextStyle": "dark",
       "navigationBarBackgroundColor": "#c20c0c",
       "navigationBarTitleText": "网易云音乐",
       "navigationBarTextStyle": "white",
       "enablePullDownRefresh":true,
       "backgroundColor":"#000"
     },
     "tabBar": {
       "selectedColor":"#c20c0c",
       "list": [
         {
           "pagePath": "pages/musiclist/musiclist",
           "text": "歌曲列表",
           "iconPath":"/images/music.png",
           "selectedIconPath":"/images/music-active.png"
         },
         {
           "pagePath": "pages/artistlist/artistlist",
           "text": "歌手列表",
           "iconPath":"/images/artist.png",
           "selectedIconPath":"/images/artist-active.png"
         }
       ]
     },
     "style": "v2",
     "sitemapLocation": "sitemap.json"
   }
   

7. 小程序像素单位

   结论：小程序中页面布局不要使用px,使用rpx
         rpx:根据屏幕的大小自适应取值
         px:物理像素
         换算关系不同设备是不一样的：
           iphone5:1rpx ≈ 0.42px
           iphone6:1rpx ≈ 0.5px 
   

       iphone5:1rpx ≈ 0.42px
       iphone6:1rpx ≈ 0.5px