微信小程序

Posted 2021-07-08 fengshaopu

一、小程序
一、下载
第一网址：https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=918632493

1.注册好以后登录

二、使用
2.开发工具,里面有开发者工具下载 。https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根据自己的配置下载。

.下载好以后 是：
1.点击加号或者新建

2.
1.项目名称可以随便起
2.目录
3.APPID在开发管理、开发设置
4.x选择不使用服务端
5.创建就好
三、进去使用

1.app.json 是全局的：里面的pages是路由，

window是头部：

  "window":{
    "backgroundTextStyle":"dark",     // 这个代表下拉 loading 的样式，
    仅支持，只能设置二个值，dark和 light
    "navigationBarBackgroundColor": "#fff0ff", //这个是头部背景颜色
    "navigationBarTitleText": "头部",  //头部内容
    "navigationBarTextStyle":"black", //头部内容的颜色
    "enablePullDownRefresh": true, // 下拉刷新配合第一个使用
    "backgroundColor": "#ff0" //下拉刷新背景颜色
  },

2.底部 至少二个

 "tabBar": {
    "list": [{ 
      "pagePath":"pages/index/index",  //路径
      "text": "首页",     //底部内容
      "iconPath": "assets/tabbar/home.png",  //图片开始
      "selectedIconPath": "assets/tabbar/home_active.png" //图片结束
    },
     {
      "pagePath": "pages/list/list",
      "text": "list",
      "iconPath": "assets/tabbar/cart.png",
      "selectedIconPath": "assets/tabbar/cart_active.png"
    },
   ]}

四、介绍pages的内容

1.index.js 是写逻辑的地方
2.index.json 存储json文件的
3.index.wxml 是在页面显示的内容 主要部分
4.index.wxss css样式

五.使用有哪些变化

写个案例 todolist

<text>todo</text>
<input type="text" bindblur="k" class="s" />
<button bindtap="t">添加</button>
<view wx:for="{{list}}" wx:key='index' wx:for-index="value" >
 
  {{value}} {{item}}  <text bindtap="s" data-index="{{value}}" >删除</text>
</view>

  k(e){
    console.log(e);
 this.setData({
   name:e.detail.value
 })
  },
  t(){
        var f=this.data.list
        var g=this.data.name
        f.push(g)
        console.log(f); 
        this.setData({
          list:f,
        })
        
  },
  s(e){
  console.log(e);
  var index=e.target.dataset.index
  console.log(index);
  var list1=this.data.list
  list1.splice(index,1)
  this.setData({
    list:list1
  })
  },