淘先锋技术网

首页 1 2 3 4 5 6 7

小程序所需事项:
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>

微信小程序的开发文档