简介：关于小程序开发的基础教程笔记

一.注册微信小程序的公众号平台

    1.登录网址mp.weixin.qq.com，选择小程序板块注册

        注意事项：账户邮箱需要一个不在其他公众平台注册过的邮箱

    2.基础设置选项

        注意事项： 介绍：选择个人开发

                           主体信息：属于个人

                           服务类目：选择工具》效率（方便过审）

    3.开发管理选项

        注意事项：开发者ID：AppID（小程序ID）一定保存好

    4.下载开发者工具

        4.1登录网址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

            选择第一个稳定版下载安装，一直下一步安装即可

    4.2 打开软件扫一扫登录，新建一个文件夹地址保存编写的小程序，创建一个小程序

        注意事项：初始模板选择默认即可，暂时不选择云开发

二.了解编辑软件的基本设置

    1.左上角机型选择iPhone6/7/8

    2.Pages目录 ，存放所有的页面，每个文件由四个文件组成

    3.Utils目录 ，存放工具类（包，模块之类）

    4..app.js是入口文件，程序在运行时，首先要执行的文件

        app.json 是全局配置文件

        app.wxss是全局样式文件

        project.config.json是项目配置文件

        sitemap.json是SEO 配置文件

三.编写格式

    1.wxml中常用的组件（小程序有自己的一套编写格式，标签）

        1.1   view 相当于 div

        1.2   text 相当于 span

        1.3   swiper是滑块视图容器，它里面只能放swiper-item组件，

                swiper组件的常用属性：

                circular是衔接滑动

                autoplay是自动切换

                interval自动切换时间间隔

                indicator-dots是否显示面板指示点

                indicator-color指示点颜色

                indicator-active-color当前选中的指示点颜色

                image是图片组件，注意：最好全部采用网络图片，因为小程序总提交不允许超过2MB

    2.wxss中，不要写标签选择器和id选择器，只用类class选择器

        tip1：图片大小的设置（width:100vw; height:calc(100vw/1080*420）

                 calc()函数是css3中计算尺寸的函数

          tip2：为了让小程序里面的内容在各种设备上能够自适应显示，微信推出了响应式单位：rpx，在iphone6/7/8中 2rpx=1px

    3.导航栏的设置

        在全局设置app.json文件中window窗口中设置（详情见微信开放文档中   框架--小程序配置--页面设置--window）

            "window": {

                    "backgroundTextStyle": "light",                     （下拉 loading 的样式，仅支持 dark / light）

                    "navigationBarBackgroundColor": "#369",   （导航栏的背景颜色）

                     "navigationBarTitleText": "KW43-APP",       （导航栏的标题）

                     "navigationBarTextStyle": "white"                （导航栏的标题颜色，仅黑白两色）

              },

            注意事项：页面配置窗口window配置文件   覆盖    全局app.json文件中的window配置文件

     4.一些常用的属性

             4.1  {{}} 是插值表达式，这里面可以直接使用js里面定义的数据

                    例如：歌曲分类：{{name}}

             4.2  当前页面的js文件中，Page()函数，返回页面对象，该函数需要传一个配置参数，这个配置参数，是一个对象

                     Page({

                           // 在这个配置对象中，定义当前页面的所有内容

                          //data选项，定义页面的数据

                           data:{

                                  //分类编号

                                   typeId:1,

                                   name:"热门歌曲",

                                   hot:100,

                                   songs1:[{

                                  id:1001,

                                  name:'千里之外'

                                   },{

                                   id:1002,

                                   name:'成都'

                                  },{

                                  id:1003,

                                  name:'演员'

                                  },{

                                 id:1004,

                                 name:'刚好遇见你'

                                 }]，

                                async delSong1(e){

                                console.log(e);

                                await wx.$confirm('是否确定删除')

                                 //解构出对应的索引

                                 let {index} = wx.$key(e)

                                //this返回的是当前页面对象

                                this.data.songs1.splice(index,1)

                                //删除完后，重新渲染页面

                               // setData()方法，设置重新更新页面中哪些数据

                               this.setData({

                               songs1:this.data.songs1

                                })

                                wx.$msg('删除成功')

                               },

                                 }）

             4.3   wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）

                     hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）

                     例如：

             4.4   wx:for指令，用于循环列表，循环出来的每一项通过item返回，每一项对应的索引，通过index返回。循环列表时，添加wx:key的好处是，将来列表发生变化时重新渲染列表的损耗为更低 （详情见微信开放文档中   框架--小程序配置--页面设置--window）

                        例如：

             4.5   bindtap是触屏事件，其实就是相当于网页中的点击事件 -->

                        例如：删除

                        注意事项：data-index  绑定此元素的index属性，与js文件关联如下

                            //获取事件源对象身上绑定的属性，即绑定的data-index，data绑定的属性名一般都是小写的，即index这类绑定的名是小写的

                            let{currentTarget:{dataset:{index}}} = e     //结构元素对应的索引并使用

       5.切换窗口导航栏tapBar

                5.1  在app.json 中添加一个配置tapBar（详情见微信开放文档中   框架--小程序配置--页面设置--tapBar）

                               "tabBar": {

                                          "color": "#000000",

                                          "selectedColor": "#336699",                       //选中后文件

                                          "backgroundColor": "#ffffff",                      

                                         "borderStyle": "black",                               

                                         "list": [                                                          //list接受一个数组，只能配置2-5个tab

                                                     {

                                                        "text": "首页",

                                                        "pagePath": "pages/index/index",

                                                         "iconPath": "assets/icon/home.png",

                                                         "selectedIconPath": "assets/icon/home2.png"

                                                     },

                                                    {

                                                      "text": "列表",                                        //tab按钮上的文字

                                                      "pagePath": "pages/list/list",                //页面路径

                                                     "iconPath": "assets/icon/list.png",         //图片路径，icon大小限制40kb，81pxx81px，不支持网络图片，“position”：“top”时，不显示icon（可用阿里图标字体库）

                                                      "selectedIconPath": "assets/icon/list2.png"   //选中图片路径，icon大小限制40kb，81pxx81px，不支持网络图片，“position”：“top”时，不显示icon（可用阿里图标字体库）

                                                      },

                                                    {

                                                      "text": "题库",

                                                      "pagePath": "pages/order/order",

                                                     "iconPath": "assets/icon/order.png",

                                                         "selectedIconPath": "assets/icon/order2.png"

                                                    },

                                                     {

                                                      "text": "购物车",

                                                       "pagePath": "pages/shopcart/shopcart",

                                                       "iconPath": "assets/icon/shopcart.png",

                                                        "selectedIconPath": "assets/icon/shopcart2.png"

                                                    },

                                                  {

                                                 "text": "我的",

                                                 "pagePath": "pages/mine/mine",

                                                   "iconPath": "assets/icon/mine.png",

                                                   "selectedIconPath": "assets/icon/mine2.png"

                                                 }

                                                ],

                                             "position": "bottom"                           //tapBar的位置，仅顶部或底部

                                              },

       6.建立多个页面路径

            在app.json文件中的Pages里建立多个页面路径，或者在左侧的选项栏Pages里建立文件夹

       7.跳转

              7.1   navigator组件跳转页面

                navigator组件，用于页面链接，默认只能跳转普通页面。

                如果要跳转tabBar页面，需要设置open-type="switchTab"。

              7.2 使用普通view组件跳转：

                    首先在js文件中定义函数，

                然后在页面中书写引用

         8. 确认框和消息框

                  确认框：

                              wx.showModal({

                                                         title:”标题”,

                                                         success:res=>{}

                             })

           消息框：

                             wx.showToast({

                                                      title:”标题”,

                                                     duration:1000

                          })

          9.封装函数

                    1.

                       2.

                    3.