小程序怎么开发做（入门）

小程序开发总结

        入门级别的小程序，主要是熟悉小程序的开发。

        较常用的 就是 页面跳转 navigator组件  ， 参数传递的两种方式（navigator组件 和 wx. navigateTo()）。

        小程序的生命周期（本案例涉及较少），小程序的 网络请求， 模板的使用。

        小程序开发和 Vue 代码风格很像，入门 还是容易的。

        github 地址   https://github.com/L1633/WX-  ， 希望能 star 一下 ，谢谢了！！

页面结构

    一个页面由多个文件组成

    ① js：定义页面的 逻辑，用于创建页面对象，以及处理页面 生命周期控制 和 数据处理

           app.js 有全局的 data 和 方法

            每个页面可以通过   const app = getApp() 来 获取应用实例

    ② json：配置文件，设置当前页面工作时 的 window的配置，此处会覆盖app.json中的 window设置，也就是说只可以设置window中设置的属性

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

        pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

        window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

    ③ wxml： 类似 充当 HTML 的角色，用于定义页面元素结构，语法 遵循 XML 语法，不是 HTML语法。

    ④ wxss：WXSS 具有 CSS 大部分的特性

            app.wxss 应用程序公共样式，充分考虑到 复用  的思想

            使用  tShopfas.setData ( { 属性名：属性值} ) 来更改 data 中的属性， 不能直接赋值，跟 React 中一样 。

网络请求

            wx.request( )

常用 UI 组件

            swiper 轮播图

            模板文件

                定义模板

                    使用 name 属性，作为模板的名字

                         数据传输   标签上增加属性    data={{   }}

                    使用模板

                        使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

                        在 wxml 文件中 引入

            navigator组件

                        页面与页面之间跳转 可以使用navigator组件

                         页面与页面之间传值，类似于web开发方式：问号参数 -------->  ?属性名=属性值&属性名=属性值

                         跳转到的页面通过onLoad 方法的参数 options 拿到

                         onLoad( options ){  }       // options . 属性名  来获取想要的参数

               编程式导航  

                        wx.navigateTo( { url : ' 地址   ' })

                        保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

常用 API

    文件上传

        wx.uploadFile(OBJECT)

    位置

        wx.getLocation(OBJECT)

    数据缓存

        wx.getStorageSync(KEY)

 框架

        wx:for   

            默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

            在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

              {{index}}: {{item.message}} 

        wx:if  和 wx:else

        事件绑定 bindtap

            当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象

            BaseEvent对象属性列表：type、timeStamp、target、currentTarget

            currentTarget（事件绑定的当前组件）：id、tagName、dataset（当前组件  上由data-开头的自定义属性组成的集合）

            点击事件传递的参数 event ，包含以 data-属性名 的参数

            event . currentTarget . dataset [ 属性名 ]

            event中的 target 和 currentTarget 的区别

            target 指的是当前点击的组件

            currentTarget  指的是 事件捕获的组件

简单小程序：豆瓣电影实战

            坑！！！！：豆瓣API 对 微信小程序请求 采取拒绝。 报错 403 forbidden。

            解决方法 将 https://api.douban.com 替换为 https://douban.uieee.com

            例如  https://api.douban.com/v2/movie/in_theaters 替换为  https://douban.uieee.com/v2/movie/in_theaters

            header设置为  header: { 'Content-Type': 'application/xml' }

            页面目录结构

结构目录

模仿引导页面

榜单（默认首页）

列表

详情

   对项目进行配置

            在项目下的app.json 中进行配置

app.json

              配置 pages

                    pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录，数组的第一项默认是 显示的页面。

                创建整个程序所需要的页面，并进行配置

                在 pages/下 创建splash、 board 、list、item 和 search 文件夹，并创建所需要要的 WXML ，WXSS，JS。

                在app.js 中添加 pages，pages 中的第一项 会作为 默认页面显示

            配置 window

                    window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

            配置 tabBar

                app.json 中 设置 底部导航栏  tabBar  至少要有2个导航栏

                pagePath 对应显示组件   text  文字   iconPath 图标  selectedIconPath 选中图标

                selectedColor 选中字体颜色  color 未选择字体颜色  borderStyle tabBar的边框，默认为黑色

   工具类

            请求函数的封装            

            秉承复用的思想，将 wx.request （原生的网络请求）进行封装

            utils / ajax.js

wx.request封装

        默认首页  模仿App引导页面

                        用轮播图来模仿引导页面

模仿App引导页面

JS

        首页   榜单页board

               总结：跟 Vue 非常相似，容易上手，唯一有点不同的是 data 数据的赋值 要使用 tShopfas.setData（{属性名：属性值}），而不能直接赋值（tShopfas.data内的值 = XXXX 是不允许的）。

              wxml ：运用到小程序组件 swiper 轮播图组件，数据跟 Vue 一样用 {{ }} 绑定，循环用 wx:for="{ { } }"

              组件 scroll-view  可滚动视图区域

              组件 nagigator    导航组件 类似 Vue 的router-link, 通过 属性 url 来指定 当前小程序内的跳转链接，值是个路径，可以通过？属性名=属性值 &属性名=属性值  的URL 传参的方式 ，将 参数 传递给下个页面。

 榜单页board.wxml

               js ：跟 Vue  类似，数据在 data 中声明， 页面加载 生命周期函数 为  onLoad

board.js

            注意：如果需要点击时高亮，可以给元素加上 cursor：pointer

    列表页 list

wxml        

list.wxml

                模板的使用

模板

注意 scroll-view 组件 的bindscrolltolower 事件 

        滚动到底部/右边，会触发 scrolltolower 事件，然后发送 http 请求

          注意！！！：使用 scroll-view的 竖向滚动时，需要给一个 固定高度，通过 WXSS 设置 height。

js

js

       详情页 item

item.wxml

js

      搜索页面 search

            做了个简单的搜索界面

wxml

js

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。