小程序流程事项及数据交互

最新推荐文章于 2024-07-02 10:55:55 发布

我绝不会倒下

最新推荐文章于 2024-07-02 10:55:55 发布

阅读量285

点赞数

分类专栏：小程序文章标签：小程序 java

本文链接：https://blog.csdn.net/weixin_41537467/article/details/108774990

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序所需事项：
1.创建小程序（可根据已有的微信公众平台账号快速创建），小程序的简介填写并配置安全域名等。
2.微信开放平台创建小程序应用
3.服务器（添加443的端口）和域名需要有，可在服务器控制台内免费配置https证书，根据流程并配置到nginx中。
4.需要一个后台管理项目（已部署服务器的），用于小程序调用接口。
5.使用微信开发者工具（公众平台下载）进行代码编写及调试。（可先看官方文档）
6.代码完成后，在微信开发者工具内右上方点击上传，可上传到公众平台登录的小程序内，需提交审核（大概两小时左右），并发布。
7.发布成功后，用户可在微信内（发现-搜索框）通过名称、简称或关键字搜索小程序，或者公众平台登录的小程序内下载小程序的二维码，可扫码进入。

以上是个人总结的完整小程序所涉及到的东西。若有问题请留言指正或探讨。

数据交互：
在pages同级目录下添加config文件的app.js，存放所有的接口地址，便于管理。
在这里插入图片描述
在.js文件内写数据交互代码，先引入接口路径文件：var api = require("…/…/config/api.js")，

  wx.request({
      url: 'api.SystemddlListUrl', //接口地址，访问后台项目的接口
      data: { //data中的参数值将传递给后台
       "page":that.data.searchPageNum,"source":"中国"
      },
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function(res) { //res是接收后台返回的数据
 		 let list = res.data.data;
 		 
        for(let index in res.data.data){  //循环操作
        }
        that.setData({   //setData是将后台返回的数据存入，可在页面展示
          list: res.data.data
        })
        console.log(res.data);
      },
      fail: function(res) {
        console.log("失败");
      }
    })

.wxml文件是页面结构，就是html

 <view class='swiper_mid' wx:for="{{list}}">  //for循环展示数据
          <view class="main" data-gid='{{item.id}}' bindtap="detail"> //bindtap 点击事件
            <view class='main-middle'>
              <view class='middle-top'>
                {{item.title}}
              </view>
              <view class="middle_all">
                <view class='middle-zhong'>
                  {{item.time}}
                </view>
              </view>
            </view>
            <view class='main-right'>
              <image src='{{item.imgSrc}}'></image>
            </view>
          </view>
        </view>